Cara Mudah Membuat "Read More" pada Blogger

Ibarat halaman utama di koran yang berisi judul-judul menarik dengan sedikit ulasan, kemudian ada tulisan bersambung ke halaman sekian. Dengan cara ini percetakan koran bisa menampilkan isi koran secara keseluruhan dengan menghemat tempat. Jika ingin membaca berita lebih lanjut dipersilahkan untuk membuka halaman tertentu.

Cara ini pula yang dipakai oleh beberapa website atau blog untuk menampilkan cuplikan dari semua atau sebagian isi web/blog di halaman utama web/blog tersebut. Biasanya dituliskan beberapa kata setelah judul posting kemudian ada tulisan "Read More". Jika tertarik ingin membaca lebih lanjut, maka kita harus klik pada "Read More" tersebut.

Saya akan memberikan cara mudah untuk membuat "Read More" pada Blogger. Kenapa saya bilang cara mudah, karena saya menemukan cara-cara yang lebih ruwet sebelum menemukan cara ini. Langsung saja, ini dia caranya:

1. Masuk ke Edit HTML pada blog yang akan kita rubah. (biasanya pada Layout/Design)
2. Simpan dulu Template yang ada dengan klik "Download Full Template" (ini untuk antisipasi kegagalan)
3. Cari "</head>" (bisa menggunakan Ctrl+F) kemudian letakkan kode di bawah ini tepat di atas "</head>" tadi.
   

   script type='text/javascript'>var thumbnail_mode = "no-float" ;
   summary_noimg = 430;
   summary_img = 340;
   img_thumb_height = 100;
   img_thumb_width = 120;
   </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(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>

4. Setelah itu cari kode ini "<data:post.body/>" kemudian ganti (replace) kode tadi dengan kode di bawah ini : 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Pastikan di setiap posting ada gambar untuk menampilkan Thumbnail pada halaman utama

Semoga Bermanfaat!

Sumber : anshuldudeja.com

Bagikan Artikel ini