Cara Membuat Auto Read More dengan Thumbnail pada Blogger

Cara Membuat Auto Read More dengan Thumbnail pada Blogger. Setiap kita melihat suatu website atau blog pada halaman utamanya atau home akan menampilkan sejumlah artikel yang sudah di tulis dalam bentuk yang di kemas agar memudahkan kita melihat artikel yang lebih banyak. Pada sebuah halaman utama atau home di sebuah website atau blog akan menyajikan sebuah gambar mini dan sebagian isi dari artikel tersebut, untuk melihat seluruh artikel biasanya menyediakan tombol Read More pada bagian akhir sebagian isi artikel atau anda dapat membuka dari link judul artikel tersebut. Akan tetapi pada pengguna blogger dengan Template yang tidak menyediakan fasilitas tersebuat akan menampilkan seluruh artikel dalam keadaan penuh, tapi jangan khawatir dengan cara di bawah ini anda dapat mengatur dan membuat tombol Read More yang akan menghemat halaman home agar dapat menampilkan lebih banyak artikel dan membuatnya semakin menarik untuk di lihat. Dengan menggunakan cara di bawah ini akan secara otomatis membuat tombol Read More dan menampilkan gambar dalam bentuk Thumbnail yang akan membuat menarik blog anda.

Cara Membuat Auto Read More dengan Thumbnail pada Blogger:

1. Dari Blogger dashboard pergi ke Template dan klik pada Edit HTML
   
   
   
   
2. Klik di sembarang area kode HTML dan tekan CTRL + F untuk membuka pencarian dan cari kode di bawah ini
   

   <data:post.body/>

   Catatan: Anda akan menemuka kode di atas lebih dari satu, kode yang kita cari adalah kode ketiga
   
3. Ganti kode diatas dengan kode di bawah ini

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
   <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Selanjutnya carilah kode di bawah ini

   </head>

5. Tepat di atas kode </head> tambahkan kode di bawah ini

   <script type='text/javascript'>
   posts_no_thumb_sum = 490;
   posts_thumb_sum = 400;
   img_thumb_height = 160;
   img_thumb_width = 180;
   </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, pURL, pTITLE){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = posts_no_thumb_sum;
   if(img.length>=1) {
   imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
   summ = posts_thumb_sum;
   }
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style type='text/css'>
   .post-footer {display: none;}
   .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
   .readmore a {text-decoration: none; }
   </style>
   </b:if>
   </b:if>

   Catatan:
   - Untuk merubah jumlah karakter yang akan di tampilkan ketika gambar thumbnail tidak di tampilkan ubahlah nilai 490 yang berwarna biru
   - Untuk jumlah karakter yang ditampilkan ketika sebuah tulisan memiliki gambar thumbnail ubahlah nilai 400 yang berwarna merah
   - Untuk mengatur besar kecil ukuran gambar thumbnail anda dapat merubah nilai 160 (tinggi )dan 180 (lebar) yang berwarna hijau
   
6. Simpan Template dan selesai

Demikian tutorial dari saya mengenai Cara Membuat Auto Read More dengan Thumbnail pada Blogger
Selamat mencoba dan semoga bermanfaat ^_^