Cara Membuat Auto ReadMore Blogger dengan Image Thumbnail

Auto Readmore adalah fitur yang berfungsi untuk memotong badan postingan blog yang panjang dan meringkasnya menjadi beberapa karakter. Fitur yang bisa ditambahakan pada auto readmore adalah membuat karakter teks yang bisa rata kanan kiri, rata kiri, rata tengah dan rata kanan. Selain itu, fitur ini juga akan menampilkan salah satu gambar yang termuat didalam badan postingan dan mengubah ukurannya menjadi lebih kecil dibandingkan dengan gambar aslinya.

1. Langkah-Langkah Pemasangan

• Login ke Blogger
• Pilih Template » Edit HTML » Centang Expand Template Widget
• Copy kode di bawah ini dan pastekan tepat di atas tag </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</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>
</b:if> </b:if>

Update :

Tag conditional (warna biru) adalah tag yang berfungsi untuk menyembunyikan "Tombol Auto Readmore" pada halaman postingan dan halaman statis (laman).

Pengaturan Lanjutan :

1. summary_noimg = 500; adalah jumlah karakter yang ditampilkan tanpa image atau gambar
2. summary_img = 400; adalah jumlah karakter yang ditampilkan jika terdapat sebuah gambar
3. img_thumb_height = 100; adalah tinggi gambar / image
4. img_thumb_width = 100; adalah lebar gambar / image

• Langkah selanjutnya cari tag <data:post.body/> lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='clear: both;'/><a expr:href='data:post.url' rel='bookmark'><span style='font:bold ;color:#fff;'><b>Read More »</b></span></a>
</b:if>
</b:if>

Keterangan :

Read more » silahkan diganti dengan kata-kata sendiri. Contoh Baca Selengkapnya », Baca Selanjutnya » dan lain sebagainya.

• Sekarang untuk melihat hasilnya, pilih pratinjau terlebih dulu dan jika anda merasa sudah pas dengan hasil yang ditampilkan, baru pilih simpan.

2. Penambahan fitur

• Untuk mengganti kata Read more » dengan image atau gambar, ganti kata Read more » dengan kode di bawah ini beserta url gambar yang sudah diupload :

<img border='0' src='url image disini'/>

• Selanjutnya, untuk membuat karakter teks yang akan ditampilkan menjadi rata kanan kiri, cari kode di bawah ini :

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

• Dan tambahkan style='text-align:justify;' tepat dibelakang kode "<div" atau di depan kode "expr;id". Jika sudah dimasukkan, maka hasilnya akan terlihat seperti ini :

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

Kalau penjelasan di atas masih belum bisa dipahami, silahkan meninggalkan komentar

Nah saya sudah terapkan metode ini pada blog ini dan berhasil …..

Sumber : http://www.lost-sector.net/2012/12/auto-read-more-dengan-karakter-rata-kanan-kiri.html