Membuat Auto Read More With Thumbnails

Script auto readmore blogspot dengan thumbnails ini adalah script untuk membuat auto readmore pada template yg belum disedikannya auto readmore. Dengan penggunaan auto readmore akan membuat blog sedikit lebih ringkas, rapi dan memudahkan untuk pembaca blog memahami isi blog kita.

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://point-428.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
    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>
<!-- Auto read more script -http://point-428.blogspot.com- End -->

Yang berwarna biru adalah jumlah dan ukuran tampilan, berikut penjelasannya :

• summary_noimg=jumlah karakter tanpa gambar, 
• summary_img=jumlah karakter dengan gambar, 
• sedangkan img_thumb_height dan 
• img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3.  Kemudian cari <data:post.body/> (gunakan Ctrl+F), lalu hapus dan GANTI dengan:

<!-- Auto read more -http://point-428.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://point428.blogspot.com- End -->

Note : Ganti Read More >> dengan kata-kata yang anda diinginkan.

4. Tinggal kalian klik simpan deh dan rasakan perbedaannya.. :D

Tweet