Read More Otomatis Versi Baru

Postingan tutorial blog kali ini kita akan mempraktekkan cara membuat read more otomatis versi baru yang juga telah saya terapkan pada blog ini. Berbeda dengan tutorial membuat read more yang pernah saya postingkan sebelumnya (lihat di sini), trik read more ini akan secara otomatis membuat penggalan postingan sobat untuk sebagian ditampilkan dan sebagian lagi yang disembunyikan. Dan juga dapat menggatur besaran gambar menjadi sama dan lebih kecil dan rapi sehingga memperingan tampilan halaman beranda sobat.

Berikut Langkah-Langkahnya:

• Login terlebih dahulu ke akun blogger sobat.


• Klik menu Rancangan --> Edit HTML. Beri centang pada kotak kecil "Expand Widget Template".


• Kemudian, carilah kode </head>. Bisa dengan menggunakan fasilitas pencarian untuk mempercepat (Ctrl + F).


• Jika telah ketemu, maka pastekan kode dibawah ini tepat diatas kode </head>.




<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)

********************************************/
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>




• Kemudian, lanjutkan dengan mencari kode <data:post.body/>. Dan timpalah kode <data:post.body/> dengan 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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>




• Simpanlah Template sobat.

*Cat: Jika sobat masih menggunakan read more versi lama, maka hapuslah terlebih dahulu script dari read more versi lama dengan cara melihat kembali tutorial dari read more yang sobat gunakan.

Semoga berguna dan bermamfaat...