Cara Pasang Read More Otomatis di Blog

Siang sahabat sekalian...di tengah tengah kesibukan kuliah akhirnya bisa juga nih ngupdet blog ini, hehe...pada tulisan kali ini, saya akan memberikan tutorial bagaimana cara memasang readmore dengan mudah...bagaimana caranya? 

1. Masuk ke Edit Html Blogger, kemudian centang pada Expand Widget Template
2. Pastekan Kode di bawah ini di atas kode </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>
3. Cari kode ini <data:post.body/>
4. Kalau sudah ketemu, ganti kodenya dengan kode berikut
<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>

5. Keteranangan :
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; : Tentukan berapa banyak karakter yang akan di tamiplkan jika postingannya mengandung gambar.

summary_img = 250; : Tentukan berapa banyak karakter yang akan di tampilkan jika postingannya tidak mengandung gambar.

img_thumb_height = 120; : Tinggi dari gambar yang akan di tampilkan.
 
img_thumb_width = 120; : Lebar dari gambar yang akan di tampilkan.


5. Jika Sudah selesai, jangan lupa klik Publish, dan liat hasilnya.


Selamat Mencoba... ^_^