Membuat Read More Otomatis Dengan Gambar

Arif Network Membuat Read More Otomatis Dengan Gambar - Kali ini, Arif Network akan berbagi tutorial tentang cara membuat read more otomatis/ auto read more dengan Gambar/Thumbnails. Dari sekian banyak template, pasti sobat ingin berkreasi sendiri dengan template kesukaannya. Bahkan pertama kali saya mulai serius untuk blog. Saya mulai dari template bawaan yaitu Simple Template dari Blogger. lalu saya Modifikasi sendiri dengan Auto Read more/ read more otomatis, Artikel terkait, dll. Saya merasa lebih puas dengan hasil karya saya itu.

Langsung saja saya akan memberikan informasi tentang cara membuat read more otomatis atau auto readmore dengan gambar/thumbnails.
1. Masuk ke dashboard sobat.
2. Klik Template > Edit HTML > Lanjutkan
3. Centang pada kotak pojok kiri atas.
4. cari kode </head> , gunakan Ctrl + f supaya lebih mudah. lalu paste scribt dibawah ini tepat dibawahnya.

<script type='text/javascript'>
var thumbnail_mode = "yes"; //http://teristimewaa.blogspot.com/
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>

6. Cari kode <data:post.body/> , lalu GANTI dengan scribt dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

ganti kata yang berwarna merah , sesuai keinginan sobat. Apabila ingin menggunakan gambar bisa mengganti kata merah dengan scribt.

<img border='0' src='url gambar readmore'/>

7. Jika sudah, Simpan template.
Lihat hasilnya, sobat telah berhasil membuat auto read more atau read more otomatis dengan gambar. Berkomentarlah sebagai Bukti bahwa sobat telah mampir.