Cara Membuat Readmore Otomatis (Thumbnails) Blogspot

Assalamualaikum wr.wb, tutorial blogspot kali ini Kang Aluha akan memberikan panduan praktis dan mudah mengenai cara membuat readmore atau jika di translate dalam bahasa Indonesia yaitu baca selengkapnya yang disertai dengan gambar (thumbnails). Maksud dari Readmore / baca selengkapnya merupakan cara alternatif untuk memenggal atau memotong sejumlah karakter yang muncul di halaman utama sebuah blog. Selain bentuk text / tulisan auto readmore ini juga dilengkapi dengan karakter gambar / thumbnails yang bertujuan untuk mempercantik tampilan artikel pada halaman utama blog.

Ada tujuan tersendiri dari penggunaan auto readmore pada blogspot yaitu menjadikan blog lebih cepat dalam proses loading dan menampilkan blog lebih elegan, simple, dan professional. Caranya pun cukup mudah dan tidak terlalu rumit. Anda juga dapat mengatur jumlah karakter yang muncul, ukuran gambar yang muncul di halaman utama, dan jumlah karakter tanpa gambar. Untuk demonya Anda bisa melihat pada halaman utama Giovani Aluha Blogger ini. Jika sebelumnya Anda belum menggunakan fungsi auto readmore ini, silahkan ikuti panduannya di bawah ini.

Penerapan Kode Script Auto Readmore Blogspot

• Login ke Blogspot dengan Akun Anda
• Pada dashboard pilih Template → Edit HTML → tekan tombol ctrl-F
• Di kolom find masukan </head> kemudian letakan script di bawah ini di atas kode terkait

<!-- Auto read more script -http://www.aluha-web.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 400; 
summary_img = 300; 
img_thumb_height = 130;
img_thumb_width = 130;
</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 -http://www.aluha-web.com- End -->

Keterangan Terkait Script

1. summary_noimg = 400; jumlah karakter artikel tanpa disertai dengan gambar.
2. summary_img = 300; jumlah karakter artikel disertai dengan gambar.
3. img_thumb_height = 130; tinggi rendahnya gambar yang muncul.
4. img_thumb_width = 130; lebar kiri kanan gambar yang muncul.

Penerapan Widget Auto Readmore Blogspot

• Gunakan ctrl-f pada form Edit Html
• Letakan kode berikut ini di bawah kode <data:post.body/>

<!-- Auto read more -http://www.aluha-web.com- Start -->
<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 style='text-align:justify;' 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'>Baca Selengkapnya →</a>
</b:if>
</b:if>
<!-- Auto read more -http://www.aluha-web.com- End -->

• Terakhir, Simpan Template.

Demikianlah panduan blogger blogspot mengenai cara membuat readmore otomatis dengan gambar di blogspot. Semoga artikel yang berjudul Cara Membuat Readmore Otomatis (Thumbnails) Blogspot berguna dan bermanfaat.

Terima kasih.