Auto "Read More" Untuk Blogger

Rabu, Februari 04, 2009

Berikut ini adalah cara memasang auto read more di blogger dengan menggunakan java script. Kelebihan dari hack ini adalah kita tidak lagi harus memasang kode pemotong artikel di postingan. Ikuti langkah-langkah berikut :

LANGKAH I.
1. Masuk ke Layout > Edit HTML ( tidak usah mencentang Expand Widget Template )
2. Temukan kode </head>
3. Letakkan kode dibawah ini diatas 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>

Aturlah kode berikut ini sesuai dengan selera anda :

summary_noimg = 250; --> jumlah karakter ditampilkan tanpa gambar

summary_img = 250; --> jumlah karakter ditampilkan dengan gambar
img_thumb_height = 120; --> ukuran tinggi gambar
img_thumb_width = 120; --> ukuran lebar gambar

4. Tekan Save Template.

LANGKAH II.
1. Tetap di Edit HTML, lalu centang Expand Widget Template. Temukan kode <data:post.body/>. Jika sudah ketemu, gantilah kode tersebut 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>

2. Save, dan selesai.

Selamat mencoba.
Credit : Anhvo