Membuat Readmore Otomatis dengan Thumbnail di Blogger

Pada Read More otomatis ini kita tidak perlu lagi memasukkan code Readmore tiap kali Posting karena sifatnya Otomatis. Dan juga kita dapat menentukan berapa jumlah karakter teks yang akan dimunculkan.
Contohnya adalah pada blogger ini juga menggunakan script ini.

 Screenshot

Sebelumya back up dulu template lama anda agar bila terjadi kesalahan bisa dikembalikan ke semula lagi.
1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Centang pada "Expand widget template", kemudian copy dan paste code di bawah ini di atas code </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)

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


Keterangan:
var thumbnail_mode = "float";  Menentukan letak dari Thumnail (float = kiri)
summary_noimg = 250; Menetapkan banyaknya karakter akan ditampilkan pada posting (tanpa Thumbnail)
summary_img = 250; Menetapkan banyaknya karakter akan ditampilkan pada posting (dengan Thumbnail)
img_thumb_height = 120; adalah tinggi Thumbnail
img_thumb_width = 120; adalah lebar Thumbnail

3. Kemudian cari code <data:post.body/> Ganti kode tersebut dengan semua code dibawah ini (klik CTRL+F untuk mepermudah pencarian)

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

Keterangan:
Pada Teks "Read More - " tersebut dapat Anda ganti. Misalnya dengan "Baca Selengkapnya - " dan lain - lain.
Sekian dulu tutorial hari ini. Jangan lupa beri Comment...