Panduan memasang Read More Otomatis pada Blogspot

Dear Blogger, pokok tulisan yang akan penulis ketengahkan sebenarnya bukan hal baru lagi di dunia blogger, master-master blogger yang sudah malang melintang di dunia per-Bloger-an sudah banyak memandu tentang cara memasang penggalan post di halaman utama pada blogspot/blogger.

Kali ini tentu saja giliran saya yang ingin sedikit berbagi tahu tentang cara memasang readmore otomatis, yang siapa saja sangat bisa untuk membuatnya hanya dengan beberapa langkah saja.

Simak langkah langkahnya berikut ini.

1. Login menggunakan akun blogger anda.
2. Masuk ke Menu Design/Perancangan dan pilih Edit Html kemudian centang Expand Widget Templates.
3. Letakkan kode dibawah ini tepat diatas </head> 
4. 
   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; 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");
   if(img.length<1) {
   imgtag = '<span style="float:left; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkKdfN_MS_mbCI8Ovfo8dAV21zgJ5hEmFZrpfy4Bn_qnJG7yt6Gt9EX2AAJyjUIHD2RS54dpSOPTrr8D_Xal8ayoik43Od_ewItwVxg12xhUeH0ad0kaaReHYbdM3OvQuXyo92ncpysER/s1600/daffy_use_blogger_shirt.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   var summ = summary_noimg;
   }
   if(img.length>=1) {
   imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><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>
5. Kemudian Cari <data:post.body/>
6. align="left" background="#000000">

   <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;);</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
   </b:if>
7. Selesai, dan simpan template anda

Ket:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXkKdfN_MS_mbCI8Ovfo8dAV21zgJ5hEmFZrpfy4Bn_qnJG7yt6Gt9EX2AAJyjUIHD2RS54dpSOPTrr8D_Xal8ayoik43Od_ewItwVxg12xhUeH0ad0kaaReHYbdM3OvQuXyo92ncpysER/s1600/daffy_use_blogger_shirt.jpg - Jika pada postingan anda tidak terdapat image di dalamnya maka secara otomatis akan tampil thumbnail dengan tampilan default seperti link gambar yang tampak diwarnai merah, nah untuk itu jika anda merasa kurang begitu berkenan, anda bisa menggantinya sesuai selera.

Panduan memasang Read More Otomatis pada Blogspot 2011-07-07T14:10:00+07:00 Rating: 4.5 Diposkan Oleh: Abdul Muta'ali