Trik Membuat Readmore Otomatis Dengan Thumnail

Membuat Readmore di posting blog sebenarnya ada beberapa cara, ada yang read more dengan thumnail, ada juga Read More dengan Gambar, Artikel tentang trik membuat READMORE otomatis dengan Thumnail (gambar kecil di samping postingan) pasti sudah banyak di posting oleh para master maupun teman-teman blogger lain. Sekedar menyebarluaskan informasi agar lebih mudah dijumpai bagi para pembaca, kali ini saya juga ikut-ikutan memposting artikel tentang trik Memasang READMORE Otomatis Dengan Thumnail di blog kesayangan saya ini. Fitur READMORE sendiri sebenarnya merupakan link yang mengubungkan potongan artikel di halaman utama ke artikel lengkapnya. Dengan memasang READMORE berarti membuat blog kita hanya menampilkan sebagian/potongan posting di halaman utama dan diikuti dengan kata READMORE (bisa juga diganti dengan kata lain sesuai keinginan).

READMORE Otomatis dengan Thumnail ini memiliki kelebihan dimana  gambar pertama dalam postingan akan di float dan di letakkan di awal paragraf secara otomatis di halaman utama, sehingga kita tidak perlu repot-repot meletakkan gambarnya di paragraf pertama, karena biasanya akan mengganggu fungsi script untuk  menampilkan iklan adsense di dalam postingan (bila kita ingin menampilkan iklan adsense di dalam postingan). Selain itu karena ini merupakan READMORE Otomatis, maka pada saat menulis postingan di editor post kita tidak perlu memotong postingan dengan menyisipkan fungsi Insert Jump Break pada editor post.
berikut langkah-langkahnya:

• Login ke akun blogger 
• pilih Desaign > Edit HTML (jangan lupa membackup template untuk cadangan).

bila sebelumnya template Anda sudah di pasangi READMORE versi lama sebaiknya kembalikan dulu seperti semula. caranya cari kode berikut, hapus  hanya kode yang berwarna merah!

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

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

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

• kemudian cari kode </head> dan copy kode di bawah tepat di atas 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>

• kemudian cari lagi kode seperti ini <data:post.body/> kemudian ganti kodenya dengan kode di bawah, caranya dengan memblok kode <data:post.body/> dan pastekan 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>

• setelah selesai klik Save Template dan lihat hasilnya

keterangan :

var thumbnail_mode = "float";  (untuk menentukan letak thumbnail berada di (float) kiri atau ganti dengan (no-float) jika ingin thumnail berada di kanan
summary_noimg = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting tanpa thumbnail)
summary_img = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting dengan thumbnail)
img_thumb_height = 120; (Tinggi thumbnail)
img_thumb_width = 120; (Lebar thumbnail)

Klik link dibawah untuk informasi lainnya