Image Thumb dan ReadMore Otomatis Pada Halaman

Selamat siang sobat semua. Setelah beberapa hari vakum karena masalah koneksi, akirnya seurune bisa menulis kembali. Pada posting kali ini, saya akan menjelaskan cara pemasangan Image Thumb dan ReadMore Otomastis Pada Halaman.

Tidak semua template blog memiliki image thumb dan readmore otomatis sebagai fasilitas yang ada didalamnya. Dengan sedikit merubah dan menambahkan kode html, kita bisa membuat image thumb dan readmore otomatis sendiri.

Jika anda tertarik, silahkan ikuti langkah berikut.

1. Login Blog anda

2. Pilih Rancangan dan klik Edit HTML.

3. Beri tanda pada kotak Expand Template Widget.

4. Backup dulu template blog anda, untuk menghindari kesalahan kode.

5. Masukkan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;
summary_img = 300;
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(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>

6. Cari kode <data:post.body/>

Hapus dan Ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2fD6N2nYxD6xXKZhXflEMjgHWcwxorSEsDwtEZzzF9y9w2TcAkmldcIJJv68AfFtwC4I1u_QY0nwPNTqlj6WpHh58RPgPvoD4hpxftcoFZeCsAPNDvaSAYr7taGzaHTKQXjQpgLK8M5Y/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>

7. Selesai dan simpan

Catatan :

Kode warna Biru = jumlah karakter kata yang tampil pada postingan tanpa ada gambar

Kode warna Merah = jumlah karakter kata yang tampil pada postingan dengan adanya gambar

kode warna Pink = Tinggi dan lebar dari gambar thumbnail yang ditampilkan pada halaman

Kode warna Hijau = Alamat/url dari gambar readmore anda

Semoga bermanfaat

Update :
Pada kode var thumbnail_mode = "float" ; menjelaskan :
float => memunculkan image thumb
nofloat => tidak memunculkan image thumb