Membuat Readmore + Gambar Thumbnails Untuk Blog

    Cara Membuat Auto Read More Plus Gambar Untuk Blogspot, fasilitas Read More memang sudah disediakan oleh Blogger, tapi tidak secara otomatis ada, kita harus menentukan read more tersebut pada posisi artikel yang telah kita tentukan kemudian klik menu Insert Jump Break. 

    Read more yang akan kita buat merupakan Auto Read More jadi secara otomatis akan ada read more walaupun kita tidak mengklik Insert Jump Break. Kelebihan lain dari script ini adanya thumbnails atau gambar dan tidak menggunakan file .js seperti auto readmore - auto readmore pada umumnya. Dengan tanpa file .js, scripts ini memang lebih panjang, tapi tidak mengurangi kinerja dari script tersebut.

Langkah untuk memasangnya :

1. Dari Dashboard pilih - Design/Rancangan - Edit HTML dan jangan lupa ceklist Expand Widget Templates.
2. Sebelum melakukan penambahan script kedalam template, sebaiknya lakukan backup template terlebih dahulu untuk menghindari kesalahan akibat salah penempatan scripts, caranya klik link Download Full template.
3. Copy script berikut dan simpan dibawah kode </head> 
   <!-- Auto read more script Start -->
   <script type='text/javascript'>
   var thumbnail_mode = &quot;yes&quot;;
   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 End --> 

summary_noimg = 430; merupakan jumlah karakter tanpa gambar
summary_img = 340; merupakan jumlah karakter dengan gambar
img_thumb_height = 150; merupakan ukuran tinggi gambar
img_thumb_width = 150; merupakan ukuran panjang gambar
var thumbnail_mode = &quot;yes&quot;; merupakan perintah untuk menampilkan gambar atau tidak, bila "yes" = dengan gambar sedangkan "no" = tanpa gambar



4. Selanjutnya cari kode <data:post.body/> dan sisipkan kode yang berwarna hijau diantara <data:post.body/>, sehingga menjadi seperti ini :
<!-- Auto read more 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 End -->



 

Read More >> bisa kalian ganti dengan kalimat yang diinginkan, bila ingin menggantinya dengan gambar, gantilah Read More >> tersebut dengan :

<img border='0' src='Alamat Gambar'/>

WE

Good Luck!!!