Cara Buat Read More Otomatis Di Blogger

Bagaimana cara membuat Read More Otomatis di Blog dengan tampilan Thumbnail?Memasang Read More di Blog merupakan hal wajib yang harus sobat blogger lakukan, karena dengan memasang Read More di blogspot, postingan sobat blogger dapat tampil dalam bentuk Summary atau ringkasan. Blog yang menampilkan seluruh isi postingan di Home Page atau Halaman Beranda, sebenarnya tidak jadi masalah, akan tetapi, satu postingan bisa memakan banyak tepat kalau seperti itu.

Banyak mamfaat yang bisa sobat blogger dapatkan dengan menambahkan fitur read more di blog seperti:

1. Blog terlihat rapi dan bersih
2. Sobat blogger dapat menampilkan banyak postingan di laman home page (Blog yang tidak menggunakan fitur read more dapat juga melakukan hal itu, akan tapi blog tidak akan terlihat bagus, karena jarak antara Header dan Footer akan terlihat panjang).
3. Dengan menambahkan fitur read more di blog, blog akan terlihat lebih profesional.

Itulah sedikit gambaran tentang mamfaat memasang Read More di blog. Nah... Apakah sobat blogger sudah berminat untuk memasang fitur ini? Kalau memasang Read More di blog, sulit atau tidak? Tidak, Cara buat Read More di blog sangat mudah. Tidak membutuhkan keahlian atau pemahaman tentang bahasa pemrograman seperti CSS atau JavaScript.

---

Cara Membuat Read More Otomatis di Blogspot

---

• Sign In di blogger.com
• Pada Menu drop down, pilih Template
• Backup template sobat terlebih dahulu
• Klik Edit Template dan klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Cari kode </head> dan letakkan kode berikut di bawahnya

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 230; //summary length when no image
summary_img = 290; //summary length when with image

img_thumb_height = 100;

img_thumb_width = 100;

</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 -->

• Setelah itu, cari kode <data:post.body/>
• Ganti kode <data:post.body/> dengan kode berikut :

<!-- Auto read more Start -->
<!-- http://www.tutorialblogspot.com -->
<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 -->

• Simpan Template sobat

Tambahan

1. Kalau kode <data:post.body/>  lebih dari satu, maka yang di hapus adalah kode yang kedua dan di ganti dengan kode di atas.
2. Kata Read more ... bisa diganti menjadi kata yang sobat blogger inginkan seperti Baca Selengkapnya, Selanjutnya, More, Continue Reading, Continue, dll.
3. Silahkan sobat blogger sesuaikan angka di bawah ini:

summary_noimg = 230; adalah ringkasan tanpa gambar
summary_img = 290; adalah ringkasan menggunakan gambar
img_thumb_height = 100; adalah tinggi gambar
img_thumb_width = 100; adalah lebar gambar