Readmore atau fasilitas link untuk memperpendek suatu postingan di halaman utama sebenarnya dapat dilakukan di settingan default blogger, yaitu dengan memasukkan jumpbreak lewat post editor pada setiap daerah yang kita inginkan menjadi batasan tampilan di halaman utama.
Kekurangan fasilitas ini tentu saja kurang praktis, karena bisa saja pada saat membuat postingan anda lupa menginsert jumpbreak. Selain itu postingan terbaru yang muncul di halaman depan blog juga tidak akan teratur, karena jumlah karakter tiap post tidak seragam.
Nah, untuk menyiasati hal diatas, dibawah ini adalah cara membuat fitur readmore otomatis yang dilengkapi dengan thumbnail (screenshot gambar) pada setiap post.
1. Masuk ke akun blogger anda dan buka tab rancangan dan pilih menu edit html.
2. Cari kode </head> dan paste kode berikut ini tepat diatasnya.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>
Pada kode diatas, anda dapat melakukan perubahan sesuai kebutuhan :
summary_noimg = 430; adalah jumlah karekter tanpa gambar
summary_img = 340; jumlah karekter jika post memiliki gambar
img_thumb_height = 100; tinggi gambar thumbnail
img_thumb_width = 120; lebar gambar thumbnail
2. Setelah itu, temukan kode <data:post.body/> pada template anda dan ganti dengan kode dibawah
<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>
<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:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
3. Simpan template anda.
Setelah itu anda bisa melihat hasilnya. Jika langkah diatas dilakukan dengan benar, maka fitur readmode dengan thumbnail ini akan muncul di blog anda.
