Cara Membuat Read More Automatis + Thumbnail (Versi 3)

Original by IFX Adrian | 01 Desember 2009 4 Comments

Hmm.. Setelah versi 1 dan 2, sekarang ada lagi read more versi 3. Kalau di read more versi 1 dan 2, banyaknya abstraksi postingan di atur dari tempat membuat postingan yaitu dengan cara meletakkan abstraksi sebelum kode <span class="fullpost"> (versi 1) atau <span id="fullpost"> (versi 2) dan sisanya sebelum kode </span>. Lain halnya pada read more versi 3 ini yang kita bisa mengaturnya langsung di saat mengedit template kita dengan menentukan jumlah karakter yang akan menjadi abstraksi postingan, inilah yang dinamakan automatis. Selain itu, kita juga bisa menampilkan thumbnail dari gambar pertama postingan. Wow, menarik juga nih! Mau tau gimana caranya?

Berikut Cara Membuat Read More Automatis +Thumbnail:

1. Seperti biasa, login dulu ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>

<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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>

Note:
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. Tetap di Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, lalu ganti kode tersebut 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:left'><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>

Tulisan READ MORE - bisa anda ganti sesuai keinginan.

7. Save lagi template nya.

Siap deh semunya. Sekarang tinggal anda coba, Ok! Have a nice dream…! Hehehe…!

Jangan lupa kasih komentar ya…