Read More Otomatis dengan Thumbnail

Pemenggalan kalimat atau readmore langsung bekerja secara otomatis tanpa harus menekan icon readmore pada menu bar. Fungsi readmore ini mampu menampilkan image (gambar) thubnail pertama dengan ukuran yang sudah ditentukan dalam postingan diawal paragraf pertama, meskipun gambar yang kita letakan berada ditengah atau akhir postingan dan berapapun ukuran gambar dalam postingan tetap akan sama besar pada tampilan di homepage atau tampilan labels/kategory, dalam read more ini kita juga dapat mengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter, yang pertama, jumlah karakter yang ditampilkan jika ada image (gambar) yang disertakan pada postingan dan yang kedua jumlah karakter tanpa image (gambar) pada postingan. Untuk lebih jelasnya lihat gambar dibawah ini!

Langkah Pertama;

Masuk tab EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalau sudah, simpan terlebih dahulu.

<script type='text/javascript'>
summary_noimg = 600;
summary_img = 440;
img_thumb_height = 125;
img_thumb_width = 125;
</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>

Langkah kedua;

Tetap pada tab Edit HTML, beri tanda centang pada "Expand widget template" temukan kode seperti dibawah

<data:post.body/>

dan ganti kode <data:post.body/> dengan semua kode dibawah ini;

<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more &#187;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

summary_noimg = 600; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar)

summary_img = 440; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar)

img_thumb_height = 125; (Thumbnail tinggi dalam satuan px)

img_thumb_width = 125; (Thumbnail lebar dalam satuan px)

Sekian.