Dodik Ariyanto: Tutorial Blog

Cara Memasang Auto Read More Otomatis

<div class="post-body entry-content">
<style>
.fullpost{display:inline;}
</style>
<div style="text-align: justify;">
Kali ini kita akan mencoba cara menggunakan Auto 
Read More otomatis, yang membuat cara penulis  atau posting artikel 
lebih mudah karena Read More kali ini kita tidak harus memotong  
tulisan menggunakan cara manual dengan melakukan pemangilan fungsi .. atau <div class="fullpost">..</div>.

Hebatnya lagi, fungsi Read More ini mampu menampilkan image 
pertama dalam postingan dan mem-fload image tersebut di awal
 paragraf awal, meskipun gambar yang kita letakan berada di tengah atau
 akhir postingan. Mungkin lebih nyaman saya sebut saja dengan fasilitas
 image thumbnail, dan kita juga dapat pengatur jumlah karakter 
yang ditampilkan. Lebih jelasnya lihat gambar dibawah ini. 
 
<div class="fullpost">
Caranya masuk ke halaman EDIT HTML , Cari kode </head> kemudian 
letakan script dibawah ini di atas kode </head> Kalo sudah, jangan 
lupa di simpan terlebih dahulu. 
 
Langsung copy paste  kode dibawah ini: 
 
 
<table bgcolor="#f4f4f4" border="0" height="1046" style="width: 552px;"><tbody>
<tr> <td width="546"><script type='text/javascript'> 
var thumbnail_mode = "float" ; 
summary_noimg = 250; 
summary_img = 250; 
img_thumb_height = 120; 
img_thumb_width = 120; 
</script> 
 
<script type='text/javascript'> 
//<![CDATA[ 
/****************************************** 
Auto-readmore link script, version 2.0 (for blogspot) 
 
(C)2008 by Anhvo 
 
visit http://en.vietwebguide.com to get more cool hacks 
 
********************************************/ 
 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
} 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) 
chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
} 
 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
imgtag = '<img src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/>'; 
summ = summary_img; 
} 
 
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ)
 + '</div>'; 
div.innerHTML = summary; 
} 
//]]> 
</script> </td> </tr>
</tbody></table>
 
Masih pada halaman EDIT HTML , Beri tanda centang pada "Expand
 widget template" lalu temukan kode seperti dibawah <data:post.body/>, Kalo 
sudah, ganti kode <data:post.body/>
 dengan semua kode dibawah ini 
 
 
<table bgcolor="#f4f4f4" border="0" height="206" style="width: 550px;"><tbody>
<tr> <td><b:if cond='data:blog.pageType != "item"'> 
<div expr:id='"summary" + 
data:post.id'><data:post.body/></div> 
<script 
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
 
<a 
expr:href='data:post.url'>READ MORE - 
<data:post.title/></a> 
</b:if> 
<b:if cond='data:blog.pageType == 
&quot;item&quot;'><data:post.body/></b:if> </td> 
 </tr>
</tbody></table>
 
Lalau simpan dan lihat hasilnya :) 
 
Keterangan: 
<ul>
<li>var thumbnail_mode = "float";   (kita dapat memutuskan 
apakah letak thumbnail berada di ( float) kiri atau jika tidak 
silahkan ganti dengan (no-float ) </li>
<li>summary_noimg = 250; (Menetapkan berapa banyak karakter akan
 ditampilkan di posting tanpa gambar / thumbnail) </li>
<li>summary_img = 250; (Menetapkan berapa banyak karakter akan 
ditampilkan di posting dengan gambar / thumbnail) </li>
<li>img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel) </li>
<li>img_thumb_width = 120 ; (Thumbnail 'lebar dalam piksel)</li>
</ul>
</div>
</div>
</div>

Cara Memasang Auto Read More Otomatis

Kali ini kita akan mencoba cara menggunakan Auto Read More otomatis , yang membuat cara penulis atau posting artikel lebih mudah ...

Baca selengkapnya »

21.42

Memasang "Back to TOP"

<div style="text-align: justify;">
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5304329487193311746" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiObGT_HLyJUhCQfHqXTytBa_wQWNghgSum8mdOr-ovtCAqHh1BXAtG64_2x7gMU91T6k4sCbA7Zlut7WDjpv-cezpyYk4s8XbeDvhSDs8jpOmLm_-e71D8Ws1X_Hqg5p6zg4N9niiTZ-A/s400/Back+to+top+main.png" style="cursor: pointer; float: left; height: 62px; margin: 0pt 10px 10px 0pt; width: 150px;" />Halaman 
blog yang panjang mungkin salah satu hal yang tidak disukai oleh 
pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan 
jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 atau 3
 artikel dan ditambah dengan pemanfaatan fungsi read more (baca 
selengkapnya). Tapi kalau memang elemen 
blog atau artikel yang panjang bagaimana? pembaca akan lebih malas 
mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau
 begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke 
atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. 
Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap 
walaupun adanya scrolling page. Berikut kode "Icon Back To Top" 
(tombol Icon kembali ke atas) dan design yang dapat Anda pilih ( designed by <a href="http://www.tips-fb.com/2009/02/cara-memasang-tombol-back-to-top.html#">syilpid</a>
 ) Masuk ke dasbor > tata letak > edit 
html > Letakan kode di atas </body> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png" style="max-width: 800px;" />  <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png" style="max-width: 800px;" />  <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png" style="max-width: 800px;" />  <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png" style="max-width: 800px;" />  <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png" style="max-width: 800px;" /> <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png" style="max-width: 800px;" /> <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png" style="max-width: 800px;" /> <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png'/></a> <img src="http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png" style="max-width: 800px;" /> <a 
href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' 
title='Back to Top'><img 
src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png'/></a> selamat
 mencoba <img goomoji="360" src="http://mail.google.com/mail/e/360" style="margin: 0pt 0.2ex; vertical-align: middle;" /></div>

Memasang "Back to TOP"

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyi...

Baca selengkapnya »

08.48