Membuat Read More pada Blogger

Cara Pasang Script Auto Read More

Penting!!! jika sebelumnya anda telah memasang readmore versi lama (.fullpost), sebaiknya hapus dulu kodenya.

1. Masuk ke account Blogger anda. Pilih Rancangan->Edit HTML
2. Centang pada "Expand Widget Templates"
3. Cari kode </head> kemudian letakan script dibawah ini tepat diatasnya.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
summary_noimg = 400; 
summary_img = 325; 
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>

4. Masih dalam tab Edit HTML, cari lagi kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right; '>
<a expr:href='data:post.url'>&#187;&#187; Readmore </a></span> 
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> 
</b:if>

5. Simpan template kemudian lihat hasilnya.

Tips:

• var thumbnail_mode = "no-float"; -> Menetapkan gambar / thumbnail tidak di float.
• summary_noimg = 400; -> Banyaknya karakter yang akan ditampilkan tanpa gambar / thumbnail.
• summary_img = 325; -> Banyaknya karakter yang akan ditampilkan dengan gambar /thumbnail.
• img_thumb_height = 125; -> Tinggi gambar / thumbnail.
• img_thumb_width = 125; -> Lebar gambar / thumbnail.
• »» Readmore -> Text untuk link readmore, silahkan ganti sesuai keinginan anda.

Demikianlah Tutorial auto read more dari saya dan jika ada yang kurang jelas, jangan sungkan untuk bertanya dengan memberikan komentar. Selamat Mencoba !