Blogging Tips: Memasang Auto Readmore Untuk Blogger

Auto readmore adalah adalah cara untuk menampilkan rangkuman dari artikel yang kita posting berdasarkan jumlah kata secara otomatis. Tidak seperti pada script read more sebelumnya, dimana diperlukan pemanggilan fungsi pada <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan.

Berikut adalah langkah-langkah memasang auto readmore atau auto summary untuk blogger :

Pertama, masuk ke menu Tata Letak > Edit HTML , jangan lupa untuk mencentang Expand Widget Template. Cari kode </head> dengan bantuan fasilitas dari browser (Ctrl+F). Copy paste script di bawah ini di bawah kode </head> tersebut :

<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[

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>

Kemudian cari lagi kode seperti di bawah ini :

<div class='post-header-line-1'/>

<div class='post-body'>

<p><data:post.body/></p>

<div style='clear: both;'/>

Kemudian replace <p><data:post.body/></p> dengan kode di bawah 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>

Terima Kasih
admin suaveOnline