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?

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 Readmore Blogspot Blogger

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.

14 Responses to "Cara Membuat Thumbnail Readmore Di Blogspot Blogger"

  1. Makasih banyak kak... infonya sangat membantu saya. saya baru belajar ngeblog... sekarang blog saya sudah aktif dengan tampilan Read More... makasih banyak ya kak... jaya selalu...

    ReplyDelete
  2. Gak bisa diCopas susah Nulis Kodenya

    ReplyDelete
  3. FOllow balik blog aku KK
    http://www.suatz.blogspot.com

    ReplyDelete
  4. thanks atas infonya... sngat bermanfaat..

    ReplyDelete
  5. Keren infonya, akhirnya berhasil juga :D. thx yahh

    ReplyDelete
  6. infonya keren, tapi sayang. niat nya sharing tapi gak bisa di copas scriptnya. buat yang mengerti script enak tinggal nulis ajah. buat yang gaptek susah juga

    ReplyDelete
  7. Thank ya buat tutorialnya........... yah walaupun pusing banget mata pas nyari kode-kodenya :)

    ReplyDelete
  8. thanks yaww buat tutorialnya,,,,,,,,,,yaa, walaupun mataku sempet pusing pas lagi nyari kode-kodenya,, tp thanks banget dah :)

    ReplyDelete
  9. sangat membantu sekali....tapi kalau kode nya tidak ketemu gimana gan ???mohon pencerahannya
    http:dhanicyx.blogspot.com

    ReplyDelete

Silahkan tulis komentar anda karena komentar merupakan salah satu dari sekian bentuk apresiasi pengunjung kepada saya. Terima kasih banyak atas kunjungannya. Sukses selalu !