Tehnik read more ini terbilang sangat simple and gak susah. Why? cos, code ini akan secara otomatis membuat gambar menjadi thumbnail. Bukan itu saja, dia akan membuat kalimat terpotong dengan sendirinya sehingga tidak banyak waktu yang terbuang tersisa begitu saja.

Inilah keunggulan tehinik read more yang baru. Yang mana tehnik ini berbeda dari tehnik-tehnik sebelumnya. Penasaran ga'???? Langsung aja ikuti tutorial kali ini.

First, silahkan menuju langsung ke halaman EDIT HTML tentunya setelah Anda login di www.blogger.com, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Kalo sudah, jangan lupa disimpan terlebih dahulu.

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 300;
summary_img = 300;
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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template", kemudian cari kode seperti dibawah:

<data:post.body/>

Kalo sudah ketemu, 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>

Simpan hasil editan, kemudian lihatlah 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 = 300; [Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail].
summary_img = 300; [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].
Untuk kata Read More bisa Anda ubah sesuka hati.

Good try and luck!