Cara Membuat Auto Read More

Microtix - Bagaimana sih cara membuat auto read more yang menarik, tanpa memperberat blog kita? Read more ini berbeda dengan read more versi blogger yang secara manual, read more ini otomatis, Jadi anda nggak perlu ribet lagi. Bagaimana caranya? Ikuti langkah-langkah di bawah ini :

1. Masuk ke blogger ( Jangan lupa back up dulu template anda)

2. Buka Dasbor ->  Template -> Edit HTML

3. Cari kode </head> gunakan Ctrl + F untuk memudahkan pencarian

4. Jika sudah ketemu, masukkan kode di bawah ini di bawah kode </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
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 End -->

5. Keterangan kode di atas 

summary_noimg = 430; Jumlah huruf tanpa gambar
summary_img = 340; Jumlah huruf dengan gambar
img_thumb_height = 150; Tinggi Gambar
img_thumb_width = 150; Lebar Gambar

6. Selanjutnya cari kode <data:post.body/> dan ganti dengan kode berikut

<!-- Auto read more 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 style='text-align:justify;' 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'><font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a>
</b:if>
</b:if>
<!-- Auto read more End -->

Catatan :

• Jumlah kode <data:post.body/> pada suatu template biasanya berbeda-beda, apabila anda menggunakan template bawaan blogger maka anda akan menemukan 3 buah kode <data:post.body/> , silakan anda hapus kode <data:post.body/> yang kedua atau yang ketiga lalu gantikan dengan kode di atas
• kode <font color='#1780dd'>Baca Selengkapnya &gt;&gt;&gt;</font></a> . Tulisan Baca Selengkapnya bisa anda ganti sesuai keinginan anda

7. Save template anda

Semoga artikel ini bisa membantu anda. Terima kasih

Berlangganan artikel via email!

Follow us!