Cara Membuat Auto Read More

Hai Sobat, kali ini saya akan share " Cara Membuat Auto Read More ". Cara ini cocok bagi kalian yang templatenya tanpa Auto Read More dan akan membuat tampilan blog kalian menjadi lebih menarik. Tujuan Auto Read More adalah untuk menghemat ruang halaman homepage template blog kalian sehingga tampilan homepage menjadi lebih rapi & lebih responsive.
Mau tau caranya.... Lanjutkan Ke Tutorial...

Cara Membuat Auto Read More

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode </head> Untuk Memudahkan Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Tepat Di Atasnya

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Leon Sion T

visit http://Cak-yit.blogspot.com untuk mendapatkan script blog terbaru 
********************************************/
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 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Keterangan :

summary_noimg = 250 (panjangnya teks pada post yang tidak memiliki gambar)
summary_img = 250 (panjangnya teks pada post yang memiliki gambar)
img_thumb_height = 50 (ukuran tinggi gambar/tumbnail pada postingan)
img_thumb_width = 50 (ukuran lebar gambar/tumbnail pada postingan)

4. Cari Kode <data:post.body/>
5. Hapus Kode <data:post.body/> Dan Di Ganti Dengan Kode Di Bawah Ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>.post-footer {display:none;}</style><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

6. Untuk Mempercanti / Memperindah Tampilan Auto Read More Anda Dapat Menggunakan Kode Di Bawah Ini ( Letakkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> )

/* Read more----------------------------------------------- */
.rmlink a{font-family:cuprum; background-color:#45818e; color:#FFF; font-size:12px; padding:1px 3px 1px; text-transform:none}
.rmlink a:hover{background-color:#2E5760}

7. Klik Simpan