Membuat Auto Read More With Thumbnails

Membuat Auto Read More With Thumbnails

Ini adalah tutorial yang sudah lawas, tetapi jika ente ingin memasangnya diblog milik ente yang belum punya auto readmore, atau ente senang mengoprek-oprek template milik orang lain, silahkan pakai script dibawah ini, untuk menggantikan script yang sudah di protect oleh pembuat template..

Langkah-langkahnya:
  1. Masuk ke Blogger Panel > Edit HTML >. Back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
  2. Letakan script berikut dibawah kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 200;
summary_img = 140;
img_thumb_height = 150;
img_thumb_width = 200;
</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>

Yang ditandai dengan warna diatas adalah jumlah dan ukuran tampilan, berikut penjelasannya :
  • summary_noimg=jumlah karakter tanpa gambar, 
  • summary_img=jumlah karakter dengan gambar, 
  • img_thumb_height dan
  • img_thumb_width adalah ukuran gambar, ganti sesuai dengan keinginan.

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

<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>
Note : Ganti Read More >> dengan kata-kata yang anda diinginkan.

4. Simpan Template.

SHARE TO:

Berlangganan via email

Latest
Previous
Next Post »
Disqus Comment
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
Load comments