Cara Membuat Read More Otomatis di Blog

Kali saya akan menshare cara membuat Read More Otomatis di Blog. Bagi anda yang baru memulai membuat blog seperti saya kadang meresa heran melihat blog orang lain yang pada homepagenya terlihat rapi, simple, dan dinamis serta setiap atrikel hanya terdiri dari 1 atau 2 paragraf dan lainnya terpotong oleh tulisan Read More atau Baca Selanjutnya. Nah maka dari itu membuat Read More atau Baca Selengkapnya sangat penting dan berikut ini caranya.

1. Login ke blogger
2. Klik Template kemudian Klik Edit HTML
3. Kemudian tekan tombol Ctrl + F padac keyboard
4. Lalu pada kotak pencarian yang muncul ketikkan kode </head>

5. Masukkan kode berikut tepat di atas </head>

<!--ReadMore http://ilham277.blogspot.com-->

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

6. Kemudian cari lagi kode <data:post.body/>
    Biasanya kode tersebut ada 2 jadi pilih saja yang ke-2 dengan cara menekan enter 2 kali setelah memasukkan kode tersebut.
7. Setelah menemukan kode tersebut hapus dan ganti dengan kode berikut

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

8. Setelah itu klik Pratinjau Template untuk melihat apakah Read Morenya sedah terpasang
9. Jika sudah terpasang klik Simpan Template.

semoga bermanfaat.!!