Bikin Auto Readmore v2

Kali ini kita akan bikin Auto Readmore, sangat berguna untuk postingan blog yang terlalu panjang. Sehingga postingan kita yang tampil di halaman awal hanya ditampilkan sebagian saja.
Bagaimana caranya? Yuuukk mari..

1. Login di blogger.com
2. Klik Rancangan
3. Klik Edit HTML, lalu centang Expand Widget Templates
4. Cari kode </head> lalu copy kode di bawah ini, paste sebelum kode </head>

 <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

5. Cari kode <data:post.body/> atau <p><data:post.body/></p>, ganti kode tersebut dengan kode di bawah 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Kemudian Save Template, lihat hasilnya..


Note : 

Pada kode/script di atas..


summary_noimg = 300; (Adalah jumlah karakter yang ditampilkan tanpa gambar/thumbnail)
summary_img = 300; (Adalah jumlah karakter yang ditampilkan dengan gambar/thumbnail)
img_thumb_height = 100; (Tinggi gambar/thumbnail yang ditampilkan dalam piksel)
img_thumb_width = 120; (Lebar gambar/thumbnail yang ditampilkan dalam piksel)
Kata "Read More …" bisa di ganti dengan apa yang kita inginkan, misalnya "Selengkapnya.." atau "Selanjutnya.." dan lain-lain sesuai kebutuhan kita.


Semoga Bermanfaat..