Cara Membuat Auto Readmore Bergambar di Blogger

Setelah lama tidak memposting tentang Tutorial Blogger, pada kesempatan kali ini Mas Adhie akan berbagi tips bagaimana cara membuat auto read more pada blogger. Sesuai dengan judulnya anda tidak perlu membuat readmore secara manual saat memposting karena secara otomatis template anda akan membuat read more.

Read More yang Mas Adhie bagikan adalah dengan dilengkapi dengan thumbnail gambar dengan otomatis mengambil  gambar pertama pada postingan.

Untuk mengaktifkan fitur auto read more pada blogger silahkan ikuti cara berikut

1. Login ke akun Blogger anda.
2. Masuk ke menu Template > Edit HTML
3. Beri centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini tepat diatas </head> untuk memudahkan pencarian tekan Ctrl+F atau F3

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; 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");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ysEjgnQCn2wo4QpXTFTW_nc8ZJ-xi7GCWqCb_fl9SSfu9Iq5MduxMNIRc4yrP56zroOG6EvLC6v_3Ud0YEVJoszzKv2QEdtcgGDOD3NLZUb9PfD2y5iX7W2K4vn9AdkaUNXaI3NiSg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>

5. Kemudian cari <data:post.body/> atau <p><data:post.body/></p>
6. Ganti kode tersebut 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:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>

6. Kalau sudah, simpan template anda.
7. Selesai.

Keterangan :

summary_noimg = 300 jumlah karakter yang ditampilkan tanpa gambar
summary_img = 300  jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ysEjgnQCn2wo4QpXTFTW_nc8ZJ-xi7GCWqCb_fl9SSfu9Iq5MduxMNIRc4yrP56zroOG6EvLC6v_3Ud0YEVJoszzKv2QEdtcgGDOD3NLZUb9PfD2y5iX7W2K4vn9AdkaUNXaI3NiSg/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

Jika masih belum jelas, silahkan bertanya lewat komentar.
Selamat Mencoba :)