Cara Membuat Read More Otomatis Plus Thumbnail Versi 3

Kali ini saya akan berbagi dengan temen-temen semua tentang cara membuat readmore otomatis plus thumbnail (versi 3). Sebenarnya apa sih pentingnya readmore pada sebuah blog? Salah satunya adalah dengan menggunakan read more pada blog kita, memungkinkan artikel yang di tampilkan pada halaman utama blog kita akan terpotong alias lebih pendek, sehingga menghemat halaman juga. Lalu, bagi yang sebelumnya sudah pernah mencoba membuat read more ini dengan cara yang manual, kali ini kita akan membuatnya dengan cara otomatis.

O..ya, bagi temen-temen blogger semua yang sebelumnya telah membuat read more manual, silahkan edit terlebih dahulu kode pada templatenya ke dalam kode yang semula. Silahkan perhatikan kode di bawah ini yang merupakan contoh pembuatan readmore yang manual :

<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;'/>

Silahkan hapus kode yang saya tandai dengan huruf cetak tebal. Namun kemungkinan, kode pada setiap blog akan berbeda, jadi sesuaikan saja.....he..he..he...

Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini. Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap. Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.

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

Nah, belum selesai, selanjutnya silahkan cari kode seperti ini <data:post.body/>, nah kalau udah ketemu, ganti kode <data:post.body/> 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>

Catatan:

• img_thumb_height = 100;, merupakan tinggi thumbnail dalam piksel. 
• img_thumb_width = 100;, merupakan lebar thumbnail dalam piksel. 
• summary_noimg = 200;, yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar. 
• summary_img = 200; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.  
• Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.

Selesailah sudah, selamat mencoba dan silahkan lihat hasilnya.

Jangan lupa baca yang ini juga