Kamu ingin buat thumbnail read more di Blogspot Blogger maka bisa dengan mudah ikuti cara di posting ini. Cara ini bisa diterapkan hampir pada semua template Blogspot, tanpa terkecuali. Termasuk template anda sedang gunakan sekarang.

Dan juga bagi rekan yang ingin coba-coba buat template Blogspot bisa pergunakan cara saya sharing disini, dan hasilnya bisa lihat seperti pada tampilan muka blog Aku Jalan Terus, dimana setiap artikel terdapat potongan gambar. Atau bisa lihat screenshotnya berikut ini.

Sudah punya gambaran mengenai hasil kamu dapatkan nantinya setelah praktekan cara diatas? Maka langsung lanjutkan kecara berikut ini. Dan jangan lupa share informasi diposting ini, setelah kamu berhasil praktekan caranya. Okey?

Ingat! Kamu tidak usah KLIK readmore versi Blogspot, karena dengan praktekan cara ini, kamu sudah punya readmore otomatis. Jadi setelah selesai tulis posting langsung saja publikasikan agar thumbnail gambarnya muncul.

Cara membuat thumbnail readmore di Blogspot Blogger

1. Login ke Blogger.com.
2. Lalu klik Rancangan (Design) >>> Edit HTML >>> Expand Widget Template.

Karena blog ini disable klik kanan, maka setiap kode dilangkah 3, 4 dan 5 terkotak oleh syntax highlighter KAMU KLIK SAJA KODE didalam kotak nanti kodenya akan terdrag, jika tidak bisa maka di drag sendiri, jika semuanya telah terdag, maka pencet CTRL+C pada keyboard untuk menyalin kode itu kemudian paste.

3. Sekarang cari kode tag berikut ini.

<data:post.body/>

4. Ganti kode diatas, dengan kode tag panjang berikut ini.

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5. Sekarang temukan </head> lalu letakan kode berikut ini tepat diatasnya.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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>

Sedikit penjelasan.

summary_noimg = 430; merupakan ukuran tinggi potongan artikel tanpa thumbnail / gambar.
summary_img = 340; merupakan ukuran tinggi potongan artikel dengan thumbnail / gambar.
img_thumb_height = 100; ukuran tinggi gambar / thumbnail.
img_thumb_width = 120; ukuran lebar gambar / thumbnail.

Itulah cara membuat thumbnail readmore di Blogspot blogger dan semoga bermanfaat untuk anda.