Cara Membuat Read More Beserta Gambar Thumbnails Di Postingan Blogger

Kali ini kita akan mempercantik Blog kita dengan membuat Read More yang disertai dengan gambar thumbnails yang berupa gambar (JPG) atau animasi (GIF).

Sebenarnya ada dua cara untuk membuat Read More,yakni yang akan kita bahas disini hanya satu cara saja yaitu bagaimana cara membuat auto Read More di Blogger yang disertai gambar thumbnails.

Cara Membuat Read More Beserta Gambar Thumbnails :

• Login ke Blogger.
• Masuk ke halaman Dasbor,lalu pilih Rancangan.
• Kemudian pilih Edit HTML.
• Beri tanda centang pada Expand Template Widget.
• Cari Kode </head>.
• Taruh (copy-paste) kode dibawah ini diatasnya.

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

Keterangan :

1. Summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya.
2. Summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya.
3. img_thumb_height = 120 adalah tinggi gambar.
4. img_thumb_width = 120 adalah lebar gambar.

• Selanjutnya,cari kode <data:post.body/> kemudian ganti dengan kode dibawah ini : 

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/>

</div>
<script type='text/javascript'>createSummaryAndThumb

("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>

Baca Selengkapnya... 

</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/></b:if>

Keterangan :
Ganti tulisan "Baca Selengkapnya..." (tanpa tanda kutip) yang berwarna merah diatas dengan kata-kata yang kita suka. Apabila kita ingin menggantinya dengan gambar,ganti tulisan berwarna merah tersebut dengan :

<img border='0' src='url (direct link) gambar readmore'/>

url (direct link) gambar readmore adalah link / URL dimana kita menyimpan atau upload file gambarnya di hostingan kita.

• kemudian priview terlebih dahulu untuk melihat hasilnya,lalu klik save / simpan template.
• Selesai.

Selamat Mencoba