Membuat Read More Otomatis Pada Blog

Pada postingan ini saya akan berbagi ilmu untuk membuat read more otomatis yang keren seperti yang kalian lihat pada blog saya ini

Oke langsung aj

> Untuk Pertama kali seperti biasa Klik Dashbor > Rancangan > Edit HTML > dan contreng  Expand Template Widget.

> Selanjutnya,cari kode </head> (untuk mempermudah pencarian tekan CTRL + F di keyboard) ,setelah ketemu tempatkan kode dibawah ini dibawah kode </head>
  
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
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>

> Selanjutnya Cari kode <data:post.body/>
> Ganti kode <data:post.body/> dengan kode di bawah ini :

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<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;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://i1212.photobucket.com/albums/cc444/ridhofikrialmi/readmore-1.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

> Kemudian Save Template atau simpan

Keterangan : 

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya  

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”; 
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail; 
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail; 
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel; 
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel

Semoga bermanfaat....