Cara Pasang Pasang Readmore Otomatis

Readmore otomatis ini lebih canggih karena fungsi pemenggalan kalimat bekerja secara otomatis tanpa harus menyisipkan kode tertentu di postingan seperti yang digunakan di readmore versi lama.
Dan hebatnya di Readmore ini terdapat fasilitas image thumbnail yaitu bisa menampilkan gambar pertama dalam postingan dan mem-fload gambar tersebut di awal paragraf, meskipun gambar diletakkan ditengah atau akhir postingan. Selain itu, kita dapat juga dapat mengatur berapa jumlah karakter yang akan ditampilkan, baik saat menggunakan gambar atau saat tidak menggunakan gambar.
Oke para blogger mania langsung aja yach...Untuk memasang Readmore Otomatis ini silahkan ikuti

langkah-langkah berikut ini:

1. Jika anda sudah menggunakan readmore versi lama hapus dulu kodenya
2. Masuk ke halaman Edit HTML, cari kode berikut </head> (jika anda kesulitan mencari kode tersebut   silahkan anda tekan tombol Ctrl + F pada keybord anda trus copy dan pastekan kode tersebut di kotak pencarian maka secara otomatis kode tersebut akan muncul). jika anda sudah menemukan kode tersebut maka letakkan script di bawah ini diatas kode </head>
Silahkan copy paste script kode dibawah ini:

<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>
 kemudain di save yach..... ok Masih di halaman EDIT HTML, beri tanda centang pada "Expand widget template" lalu cari kode berikut : <data:post.body/>

ika sudah, ganti kode <data:post.body/> dengan semua 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>

Simpan dan lihat hasilnya...

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)

Selamat mencoba Semoga anda berhasil  :-)






.