Cara Membuat Readmore Otomatis di setiap postingan Blog

Jika kita menggunakan template yang di download dari sebagian besar master bloger biasanya fasilitas readmore otomatis sudah terpasang, dan kita sudah tidak perlu lagi repot - repot untuk membuatnya. namun bagi Anda yang mempunyai blog yang belum terppasang readmore, dan ingin membuatnya sendiri dengan maksud agar tampilan blog lebih rapih dan bisa meneampilkan beberapa postingan di halaman utama, maka ada baiknya jika Anda meneruskan untuk membaca postingan ini.

Pada postingan kali ini saya akan berbagi cara untuk membuat read more secara otomatis pada setiap postingan dengan memasang kode script di template blog kita, berikut ini langkah-langkah untuk membuatnya:

login ke akun blogger Anda
Pilih menu Tamplate, kemudian jangan lupa membackup template untuk menghindari resiko kegagalan.dan rusaknya template blog Anda.
Pilih "Edit HTML" dan jangan lupa centang tanda "Expand template widget"
Lalu cari kode </head> : untuk mempermudah pencarian tekan F3. atau Ctrl+F
Copy dan Paste Code berikut ini sebelum atau diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

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>
Langkah erikutnya Cari kode <data:post.body/>
Ganti kode <data:post.body/> dengan kode di berikut 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;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> »»   </a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/>

</b:if>
Simpan Template kemudian lihat hasilnya..