Cara mudah membuat auto read dengan thumbnails gambar di blogspot

Auto readmore disini adalah suatu cara untuk modifikasi blog supaya setiap postingan di halaman utama blog kita secara otomatis hanya menampilkan cuplikannya saja, tujuannya supaya tampilan halaman utama blog kita menjadi tetap terlihat bagus dan rapih. Untuk contohnya seperti di blog saya ini.

Kali Saya akan berbagi informasi tentang cara mudah memasang auto read more atau baca selanjutnya di blog.

1. Silahkan kamu login ke blogger
2. Pilih Template
3. Pilih Edit HTML
4. kemudian akan ada sebuah tulisan peringatan. Pilih lanjutkan.
5. Contreng atau ceklis kotak kecil Expand Template Widget untuk mengantisipasi kesalahan kode.
6. Silahkan cari kode </head> gunakan Ctrl + F untuk mencari kode
7. Dan pasang kode di bawah ini di atas kode </head>

<!-- Auto read more script
<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

Keterangan:
Kode yang berwarna merah di atas adalah jumlah dan ukuran tampilan, 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.

8. Kemudian cari lagi kode <data:post.body/>
9. Dan ganti kode <data:post.body/> dengan kode di bawah
Jika di temukan tiga kode <data:post.body/> coba ganti kode yg ketiga atau yg paling terakhir.

<!-- Auto read more
<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

10. Jika sobat ingin supaya tampilan auto read more nya menjadi rata kiri-kanan / justified, lihat pada bagian script yg kedua di atas, jika auto read more nya sudah di pasang, gunakan CTRL+F dan cari kode di bawah ini

<div expr:id='&quot;summary&quot; + data:post.id'>

Tambahkan style css ini ke dalam tag: style='text-align:justify;'
sehingga hasilnya seperti ini:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

11. Preview dulu, jika sudah berhasil kemudian Simpan Template

Selesai..
Selamat mencoba, semoga tips Cara mudah membuat auto readmore di blog berhasil di terapkan di blog sobat.