Read More Otomatis dengan Thumbnail

Pemenggalan kalimat atau readmore langsung bekerja secara otomatis tanpa harus menekan icon readmore pada menu bar. Fungsi readmore ini mampu menampilkan image (gambar) thubnail pertama dengan ukuran yang sudah ditentukan dalam postingan diawal paragraf pertama, meskipun gambar yang kita letakan berada ditengah atau akhir postingan dan berapapun ukuran gambar dalam postingan tetap akan sama besar pada tampilan di homepage atau tampilan labels/kategory, dalam read more ini kita juga dapat mengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter, yang pertama, jumlah karakter yang ditampilkan jika ada image (gambar) yang disertakan pada postingan dan yang kedua jumlah karakter tanpa image (gambar) pada postingan. Untuk lebih jelasnya lihat gambar dibawah ini!

Langkah Pertama;

Login Blogger > pilih Template > pilih  EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalau sudah, simpan terlebih dahulu.

<script type='text/javascript'>
summary_noimg = 600;
summary_img = 440;
img_thumb_height = 125;
img_thumb_width = 125;
</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>

Langkah kedua;

Tetap pada Edit HTML, tekan Ctrl+F temukan kode seperti dibawah

<data:post.body/>

pada template blogger kode ini ada 3, pilih yang nomor 2 dan ganti kode <data:post.body/> dengan semua 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:left'><a expr:href='data:post.url'>Read more &#187;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

summary_noimg = 600; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar)

summary_img = 440; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar)

img_thumb_height = 125; (Thumbnail tinggi dalam satuan px)

img_thumb_width = 125; (Thumbnail lebar dalam satuan px)

Sekian.

Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.

Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.