Cara Membuat Read More Otomatis dengan Thumbnail di Blogger

Sebelum cara ini ditemukan, para blogger masih pake cara lama untuk mnyembunyikan sebagian postingnya dan menampilkan tulisan read more di beranda blog mereka. Kita harus nyanyumin tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog. Kalo menurut saya sih ini terlalu rumit, dan kita juga suka bingung mau ngebatesin artikel kita seperti apa. Malah di sebagian browser, tag read more seperti itu kadang2 suka berbeda, malah ada yang ga muncul tombol read morenya. Selain itu, masalah yang sering timbul yaitu javascript yang kadang2 ga bisa dibuka karena hostingnya sedang bermasalah. Pasti ga enak banget kan kalo masalah2 itu menimpa blog kita? Nah, saya punya solusinya nih! Kita ga harus nyantumin kode2 <span id=”fullpost”>, dan gambar yang kita sisipkan di artikel bakal muncul di postingan kita paling atas! Contohnya seperti blog saya ini. Kita tinggal ngebiarin script yang ngejalanin semuanya buat kita. Tertarik kan? Langsung aja ya kita pratekkan.

1. Pertama, kamu harus login ke akun blogger kamu, klik di sini.

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. Semoga bermanfaat!