6 Style Read More Otomatis dengan Thumbnail

Pada artikle terdahulu saya pernah sharing tentang membuat Readmore otomatis, bedanya dengan Tutorial kali ini hanya terletak pada thumbnailnya, Pengetian dari thumbnail itu sendiri adalah menyertakan judul blog di readmorenya misalnya Read more "Cara Membuat Read More Otomatis dengan Thumbnail di Blogspot". Kurang lebih kaya begitu lah,, hehehehe.

Contoh gambar Read More Otomatis dengan Thumbnail 

Oke ikuti Cara Membuat Read More Otomatis dengan Thumbnail di Blogspot

1. Pertama, kamu harus login ke akun blogger kamu,.

2. Terus, klik Tata Letak > Edit HTML.

3. Jangan lupa beri tanda ceklis pada kotak kecil expand widget templates

4. Cari tag </head>, biar lebih gampang pencet ctrl+f aja terus ketik </head> dan tekan enter.

5. Kalo udah ketemu, kopi script berikut tepat di atas kode </head> tadi.

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

Kita bisa mengubah nomor2 yang di atas sesuai kebutuhan kita:

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

6. Selanjutnya cari kode <data:post.body/> lalu ganti kode tsb dengan kode berikut.

<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 "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Selesai

Sekarang coba save template kamu, terus kamu klik preview. Kalo berhasil, semua postingan di blog kamu bakal kepotong dan bertuliskan read more di bawahnya dengan adanya thumbail tentunya. Semoga bermanfaat!

Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih

related post :