0 Cara Membuat Thumbnail Readmore Di Blogspot Blogger

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?

Cara membuat thumbnail readmore di Blogspot Blogger

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

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.