Cara Mudah Memasang Read More pada Blogspot

Nah Sahabat Blogger kali ini saya akan share Info nih yaitu Cara Mudah Memasang Read More pada Blogspot. Read More ini sangat berguna bagi Blog kita. Kenapa ??? Kalau menurut admin sih agar postingan kita itu bisa terlihat rapi di menu Home. :)

Oke >> Kalau gitu langsung aja ke TKP >> Cekidot >> :D

Pertama, Masuk ke Menu Template >> EDIT HTML >> Beri tanda checklist pada "Expand widget template" , Lalu Cari kode </head> kemudian letakan kode dibawah ini tepat di atas kode </head>. Kalo sudah, jangan lupa di simpan terlebih dahulu. Langsung copy paste aja 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>

Kedua, Masih pada halaman EDIT HTML, lalu temukan kode seperti dibawah <data:post.body/>. Kalo 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>

Ketiga, Silahkan Klik Simpan Template dan Lihat Hasilnya :)

Keterangan:

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)