Cara Membuat Read More Otomatis dengan Thumbnail di Blogger

Sebelum cara ini ditemukan, para blogger masih pake cara lama untuk menyembunyikan sebagian postingnya dan menampilkan tulisan read more di beranda blog mereka. Kita harus menambahkan 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 membatasi artikel kita seperti apa. Malah di sebagian browser, tag read more seperti itu kadang suka berbeda, malah ada yang tidak muncul tombol read morenya. Selain itu, masalah yang sering timbul yaitu javascript yang kadang-kadang tidak bisa dibuka karena hostingnya sedang bermasalah. Pasti tidak enak banget kan kalo masalah-masalah itu menimpa blog kita? Nah, saya punya solusinya nih! Kita tidak harus menyantumkan 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 membiarkan script yang menjalankan semuanya buat kita. Tertarik kan? Langsung saja 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!

Thanks to dewagajah.co.cc