Cara Pasang Auto Read More Dengan Thumbnail Blogger

Pernahkah sobat membuat Blog yang artikelnya panjang sedangkan sobat mau postingannya tetap tampil di home page secara rapi dan tidak berat saat dibuka. solusinya ialah kita perlu memasang auto readmore atau menyingkat postingan kitakehalaman berikutnya.dan kali ini pusat gratis akan membahas tentang auto readmor dengan thumbnail. Auto Read More dengan Thumbnail berfungsi untuk memotong Postingan dan Menampilkan Thumbnail berdasarkan gambar yang ada di Postingan tersebut secara otomatis. Auto Read More dengan Thumbnail bisa dibilang lebih Praktis daripada Read More yang manual karena kita tidak perlu menambahkan Kode di Setiap Postingan. Thumbnail tentunya juga membuat tampilan lebih menarik dan lebih menjelaskan isi dari Postingan tersebut.
Baca  Juga : 

Apa hubungan Auto Read More dengan SEO?

Jika Temen - temen Blogger membaca Artikel saya mengenai 7 Cara Mempercepat dan Meringankan Loading Blog. Tentunya temen - temen Blogger sudah tahu apa hubungan Auto Read More dengan SEO, yaitu untuk Mempercepat dan Meringankan Loading Blog. Selain itu Read More juga akan mempermudah untuk melihat Highlight setiap postingan sehingga mereka dapat dengan mudah memilih Postingan mana yang sesuai dengan kebutuhan mereka.
Baca Juga : Cara ampuh memasang anti Copas pada Blog Part 1

Bagaimana Cara Memasang Auto Read More? 

Oke, untuk memasang Auto Read More, Temen - temen Blogger hanya perlu mengikuti langkah - langkah simple berikut ini :

1. Login ke Blogger dan Langsung menuju ke Dashboard > Template > Edit HTML. (Jangan Lupa untuk Back Up Template terlebih dahulu.)
2. Cari kode : </head>
3. Copy Kode di Bawah ini dan Pastekan di Bawah kode </head> tersebut :
   

   <!-- Auto read more script Mulai -->
   <script type='text/javascript'>
   var thumbnail_mode = "yes";
   summary_noimg = 430; //panjang tulisan tanpa gambar
   summary_img = 340; //panjang tulisan dengan gambar
   img_thumb_height = 200; // tinggi gambar thumbnail
   img_thumb_width = 200; // lebar gambar thumbnail
   </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 Berakhir -->

4. Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :
   

   <!-- Auto read more Mulai -->
   <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'>Baca Selengkapnya</a>
   </b:if>
   </b:if>
   <!-- Auto read more Berakhir -->

5. Save Template!. Selesai.

Memodifikasi Auto Read More. 

• thumbnail_mode : setting menjadi "yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen - temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
• Pada kode kedua, Temen - Temen Blogger juga Bisa merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan Temen - temen Blogger.
  Baca Juga :

Terima Kasih. Semoga Bermanfaat !.

Sekian yang dapat saya bagikan Mengenai Cara Memasang Auto Read More Dengan Thumbnail Blogger. Jika Temen - temen Blogger masih bingung, ada yang ingin ditanyakan, atau ingin mengucapkan terima kasih, silahkan Berkomentar. Jangan Lupa Share ke Jejaring Sosial ya, dengan Like, G+, Share di Twitter dsb. Support Blog ini agar tetap hidup untuk membantu Temen - temen Blogger. Terima Kasih

» Thanks for reading: Cara Pasang Auto Read More Dengan Thumbnail Blogger

Tweet