Membuat Auto Readmore + gambar Default

Mungkin cara membuat auto readmore sudah tidak asing lagi di kalangan blogger, namun membuat auto Readmore + gambar Default masih banyak yang belum menggunakan. Auto Readmore yang saya maksud disini yaitu auto readmore yang menggunakan gambar default disaat pada waktu memposting yang tidak mengandung gambar didalamnya. kalau kita memposting artikel tidak menyertakan gambar maka pada saat di hompage yang menggunakan auto readmore tidak akan menampilkan gambar, nah dengan menggunakan auto readmore ini maka pada saat di homepage auto readmorenya akan menampilkan gambar default yang dimana gambar tersebut bisa kita pasang dengan gambar yang kita punya. sebagai contoh ini adalah gambar default blog ini.

Ok. kita langsung aja ya ke pokok masalahnya.
Pertama, login dulu ke blogger terus masuk ke menu rancangan dan pilih edit HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 550;
summary_img = 551;
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:left; padding:0px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSREdN915By859bSHkHGgjdBOlSbUn3V2raxWv09MwjpynRH4K99B8v0pAlSRH9XKGs-rWlA_7NFGbZSNQqt2kkG0CcTT6isChrW1poeuUoMu_lHfpsdoD7IBJR1JnEsj-18s7P7qZwiD/s1600/logo-gank-zone.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 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>

Selanjutnya masih pada halaman edit HTML cari lagi kode <data:post.body/> , biasanya setiap template berbeda, jika pada template sobat sudah ada script-script lain misalnya tombol like atau lainnya sesuaikan saja. Kalau sudah ketemu hapus dan ganti kode <data:post.body/> dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Simpan template anda dan lihat hasilnya.

Catatan:

• var thumbnail_mode = &quot;no-float&quot; ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)
• img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSREdN915By859bSHkHGgjdBOlSbUn3V2raxWv09MwjpynRH4K99B8v0pAlSRH9XKGs-rWlA_7NFGbZSNQqt2kkG0CcTT6isChrW1poeuUoMu_lHfpsdoD7IBJR1JnEsj-18s7P7qZwiD/s1600/logo-gank-zone.jpg = (Gambar default yang akan ditampilkan jika postingan tidak mempunyai gambar).

Apabila pada template anda sudah terpasang auto readmore dan ingin menambahkan gambar defaultnya maka anda tinggal memasukan kode dibawah ini  sebelum if(img.length>=1).

if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSREdN915By859bSHkHGgjdBOlSbUn3V2raxWv09MwjpynRH4K99B8v0pAlSRH9XKGs-rWlA_7NFGbZSNQqt2kkG0CcTT6isChrW1poeuUoMu_lHfpsdoD7IBJR1JnEsj-18s7P7qZwiD/s1600/logo-gank-zone.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}