Cara Mudah Membuat Read More Otomatis di Blog

        Beberapa waktu yang lalu saya kebingungan untuk membuat postingan di blog saya menjadi ada read morenya, sehingga saya bisa menampilkan banyak postingan di halaman utama tanpa takut blog saya menjadi berat. Read more juga berfungsi agar blog kita terlihat simpel dan dinamis. Setelah saya search lewat mbah google, ternyata ada banyak blog yang menyediakan cara untuk membuat read more, satu per satu saya coba tapi hasilnya nihil. Hingga akhirnya saya menemukan satu blog/web yang menyediakan cara yang sangat mudah dipahami dan dipraktekkan. Dan hasilnya kalian semua bisa lihat sendiri halaman utama blog saya, untuk itu saya ucapkan terima kasih banyak kepada http://www.aura-ilmu.com yang telah menyediakan cara yang sangat mudah tersebut.

         Baiklah langsung saja saya akan mensharekan pengalaman saya tersebut, berikut langkah-langkahnya :

1. Login Ke Blogger.
2. Klik Template, Backup template untuk jaga2 bila diperlukan,  atau langkah berikut bisa
    di uji coba menggunakan Blog percobaan yang lain.
3. Klik Edit HTML.
4. Klik Kiri 1 x Dimana saja dalam kotak template.
5. Klik Ctrl+F (Supaya mempercepat pencarian kode), dan cari kode berikut <head/>
Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan Kode berikut diatas <head/>

<!--Auto Read More Mulai-->

<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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;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 = 280;
</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-->

7. Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, cari yang versi web, biasanya yang kedua (ke-2) dengan mencari/enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 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'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

 9. Tinjau terlebih dahulu, kalau bagus langsung Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel di Blog, mudah-mudahan bisa bermanfaat.