Cara membuat read more pada blog

6:53 AM

Banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya. Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Mari kita langsung praktek saja simak dengan baik

• Silahkan buka template anda. Pilih: TEMPLATE >> EDIT
• Tekan Ctrl+f 
• Cari Kode </head>.
• Copy paste kode dibawah ini tepat di atas kode </head>  

• <!--ReadMore http://(nama blog kalian)-->
  
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <style>
  .post-body{text-align:justify;}
  .post-body img{max-width:none;width:auto;}
  .read-more{float:left; padding-top: 10px;}
  .read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
  .read-more a:hover{text-decoration:none;background:#666;}
  .pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
  .grow img{height:165px;width:250px;transition: all 2s ease;}
  .grow img:hover{width:400px;height:250px;}
  </style>
  <script type='text/javascript'>
  var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
  summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
  summary_img = 250; //banyaknya huruf jika ada gambar
  img_thumb_height = 165;
  img_thumb_width = 250;
  </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 = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
  //]]></script>
  </b:if>
  </b:if>
  
  <!--Auto Read More Akhir--> 

• Save template
• Setelah itu cari kode <data:post.body/>
• Kalau <data:post.body/> ada 2 hapus yang paling atas
• Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah 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>
        <div class='read-more'>
        <a expr:href='data:post.url'>read more &#187;</a>
        </div>
  </b:if>
  </b:if>
  <!-- Auto read more Akhir --> 

• Save dan lihat hasilnya 

Sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.