Latest News

Cara Membuat Auto ReadMore (Thumbnails) Blogger V2 + Button

membuat auto readmore dengan thumbnail dan button update 2014
Ini ialah post lama yang aku update kembali dan aku sesuaikan dengan beberapa hal, terutama duduk perkara editing template yang berbeda dengan template lama. Selain itu, masih banyak sahabat blogger yang menyimak cara membuat auto readmore versi satu yang kurang sempurna, dan artikel ini sebetulnya ialah penyempurnaannya, tapi mungkin sebab artikel ini masih kalah di pencarian SE (di bawah artikel readmore V1), banyak sahabat blogger yang masuk ke sana. Oleh sebab itu, post ini aku update lagi lengkap dengan gambar-gambar auto readmore yang mampu dipake free.

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini ialah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya duduk perkara pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:
1. Masuk ke dashboard > Template > Edit HTML. Download/back up file XML template terlebih dahulu supaya nanti mampu mengembalikan menyerupai semula bila ada kesalahan.
2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus dan dikembalikan.
3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F dan masukkan tag di dalam kotak search, tekan enter):
<!-- Auto read more script -http://tips-trick.com- Start --> <script type='text/javascript'> var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar summary_noimg = 430; summary_img = 340; 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(thumbnail_mode == "yes") {     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> <!-- Auto read more script -http://tips-trick.com- End --> 

  • summary_noimg=jumlah huruf tanpa gambar, 
  • summary_img=jumlah huruf dengan gambar, 
  • sedangkan img_thumb_height dan img_thumb_width ialah ukuran gambar (tinggi dan lebar [dalam pixel]).

Ubahlah poinpoin tersebut sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F, masukkan instruksi ke dalam kotak pencarian, tekan enter), dan GANTI dengan:
<!-- Auto read more -http://tips-trick.com- Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <a class='more' expr:href='data:post.url'>Read More >></a> </b:if> </b:if> <!-- Auto read more -http://tips-trick.blogspot.com- End --> 
Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau bila ingin menggantinya dengan gambar, ganti goresan pena berwarna merah tersebut dengan:
<img border='0' src='url (direct link) gambar readmore'/>
contoh:
<a class='more' expr:href='data:post.url'><img border='0' src='http://hostgambar.com/gambar-readmore.png'/></a>
Pake gambar-gambar ini, ato kalo kurang cocok cari sendiri :p
"Save as" kemudian upload sendiri dan ambil url gambarnya. Kalo perlu resize dulu sesuai dengan kebutuhan dan ukuran yang pas.

Gambar Readmore Button Gratis (PNG Transparan)

----------------
Update (12102011):
Di komentar sahabat Ari di bawah ditanyakan: bagaimana cara supaya tampilan teks di post summary - auto readmore mampu rata kiri kanan (justified)
Lihat episode ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:
<div expr:id='&quot;summary&quot; + data:post.id'>
Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>
----------------
4. Preview terlebih dahulu, bila sudah beres, kemudian save.

Gunakan kotak komentar untuk memberikan pertanyaan, permasalahan, atau apapun perihal script ini.