Tutorial blogging yang ini gw tau dari blognya o-om.com. Readmore versi ini sudah otomatis, dan jauh lebih canggih karena fitur pemenggalan kalimat atau kata dapat dilakukan secara otomatis tanpa harus menyisipkan kode tertentu di postingan seperti yang digunakan di readmore versi lama.

Fitur lain dari Readmore ini yaitu fasilitas image thumbnail, fitur ini bisa menampilkan gambar pertama dalam postingan dan menampilkan gambar tersebut di awal paragraf, meskipun gambar diletakkan ditengah atau akhir postingan. Ok langsung aja yup.

Jika kamu sudah menggunakan readmore versi lama hapus dulu kodenya.

Masuk ke halaman Edit HTML, cari kode berikut
</head> lalu letakkan script di bawah ini diatas kode </head>

Copy Paste Script 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>

Kemudian simpan template.

Masih di halaman EDIT HTML, beri tanda centang pada "Expand widget template" lalu cari kode berikut <data:post.body/>.

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

Langkah terakhir simpan template kamu, ReadMore v2 telah terpasang di blog kamu.,