Cara Membuat Link Read More Dengan Gambar Thumbnail Yang Keren

Seorang blogger yang baik dapat diidentifikasi dengan cara dia mengelola blog dan mengatur posting-nya. Homepage adalah bagian paling penting dari setiap blog. Homepage harus berisi 5 hingga 6 posting dalam rangka untuk merebut daya tarik pembaca sebanyak mungkin. Menjaga pembaca sibuk untuk waktu yang lama adalah apa yang saya sebut blogging yang sukses. Menampilkan 5-6 posting  selain akanmempercepat waktu loading blog, hal ini juga akan membuat pemandangan yang indah di blog Anda dan menunjukkan ringkasan dari setiap posting. Pada homepage saya, Anda akan melihat link Read More beserta gambar thumnail yang sesuai, dengan mengkliknya maka akan membuka seluruh posting. Lihatlah screenshot di bawah ini:

Untuk membuat link Read More dengan gambar thumnail pada blog Anda, langkahnya sangat sederhana dan mudah untuk diterapkan oleh Anda semua. Silahkan ikuti langkah-langkah di bawah ini dengan hati-hati dan teliti:

• Pertama masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang kotak Expand Widget Templates di pojok kiri atas
• Cari kode ini (gunakan fitur search Ctrl + F untuk memudahkan pencarian)

<data:post.body/>

• Ganti kode di atas dengan kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

• Sekarang carilah kode </head>, lalu letakkan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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:
summary_noimg = 430; Adalah ukuran tinggi potongan artikel jika tanpa thumbnail/gambar.
summary_img = 340; Adalah ukuran tinggi potongan artikel jika terdapat gambar/thumbnail.
img_thumb_height = 100; Adalah ukuran tinggi gambar/thumbnail.
img_thumb_width = 120; Adalah ukuran lebar gambar/thumbnail.

Begitulah tutorial singkat mengenai cara membuat link Read More dengan gambar thumbnail di blogger, semoga bisa bermanfaat bagi sobat blogger. :)