Cara Membuat Readmore Otomatis

Baiklah saat ini saya akan membahas tentang cara membuat readmore otomatis, Keuntungan dari readmore otomatis adalah pada saat memposting artikel, maka artikel anda langsung terpotong otomatis tanpa menggunakan kode <div class="fullpost"> ataupun <span class="fullpost">, dan keuntungan lainnya adalah gambar dari artikel pertama anda akan muncul di samping poastingan anda.

Hasilnya seperti gambar dibawah ini :

 

Sebelum anda mencoba trik ini, ada baiknya anda membackup template anda terlebih dahulu, caranya :
1. Klik menu Design
2. Pilih menu Edit HTML
3. Klik Download Full Template

Langkah - langkah Membuat Readmore otomatis sebagai berikut :
1. Pergi ke menu Design, lalu klik Edit HTML.
2. Centang " Expand Widget Template ".
2. Lalu cari </head>, Tekan CTRL+F untuk memudahkan pencarian.
3. Copy kode dibawah ini dengan tepat dibawah 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>

4. Masih pada menu Edit Html cari lagi kode berikut : <data:post.body/>
ingat, gunakan CTRL+F untuk memudahkan pencarian.

5. Apabila telah dicari ganti kode <data:post.body/> tersebut dengan 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>

6. Klik Save Template dan lihat hasilnya,