Cara membuat ReadMore Otomatis di Blog

Salam Bloggers..
Mungkin selama ini kamu membuat read more dengan <div class="fullpost">..</div> Atau juga dengan <span class="fullpost">..</span> wah... menyusahkan yah..
Tapi tenang, agar mempermudah kita, ada yang Otomatis kok....
Kelebihannya banyak sobat..
Yang pertama, Pemenggalan kalimat secara otomatis, jadi kita gak perlu lagi menambahkan kode seperti diatas.
Yang kedua, Readmore yang satu ini bisa menampilkan gambar pertama dalam postingan itu dan men-fload gambar itu di awal paragrap. (thumbnail image)
Yang ketiga, Kita dapat mengatur jumlah karakter yang kita inginkan.

Tapi yang penting!!!
Apabila sebelumnya kamu sudah pernah memasang readmore yang manual, maka kamu harus menghapus kode CSS itu dulu, caranya:
kamu hapus teks yang berwarna hijau dibawah ini:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Nah.. kalau sudah, barulah kita bisa memasang readmore yang otomatis...
Caranya mudah .. Langkah Pertama yang perlu kita lakukan adalah:
1. Buka Rancangan Edit HTML (seperti biasa)
2. Centang Expand Templates
3. Cari kode </head>
4. Lalu Copy Paste Kode dibawah tepat DIATAS </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>

 Lalu setelah itu, Kamu cari kode ini:

<data:post.body/>

Dan ganti kode tersebut 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>

Nah.. Setelah itu, kamu SIMPAN.
dan SELESAI..

NB:
var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Contoh Tampilannya Seperti ini:

Terimakasih...
dan saya ucapkan terimakasih juga buat senior saya..
O-OM