Cara Membuat Read More Otomatis di blog

Read more otomatis pastinya akan memberikan sebuah keindahan tersendiri pada tampilan blog anda, tidak hanya itu namun read more otomatis ini pun memberikan kesan simple pada blog anda dan memang sekarang ini hampir semua blogger telah memasang read more otomatis di blognya. Kali ini akan saya bahas bagaimana cara untuk membuat read more otomatis di blog yang mudah mudahan 100% berhasil dan sukses. Anda pasti bisa membuat read more otomatis di blog anda, ya karena memang ini sangat mudah sekali walaupun anda newbie sekalipun pastinya anda pasti bisa membuatnya. 

Fadhil 76 akan memberikan sedikit pembahasan tentang bagaimana cara untuk membuat read more seecara otomatis dan mudah, berikut caranya :

1. Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.

2. Cari Kode </head>.

3. Copy paste kode dibawah ini tepat di atas kode </head>

Copy Kode dibawah ini diatas kode </head>

<!--ReadMore http://fadil76.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-->

4. Save template.

5. Kemudian scroll dan cari kode : <b: widget id='blog1' locked='true' title='blog post' type='blog'>...

6. Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.

7. Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut.

8. Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".

9. Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.

10. selanjutnya akan terbuka kode kode yang lain.

11. geser atau scrol ke bawah dan cari kode 

<data:post.body/>

12. 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'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

13. Kemudian Save Template.

Nah, read more di blog anda telah terbuat maka selanjutnya tinggal anda lihat saja. Begitulah bagaimana cara untuk membuat read more otomatis di blog. Mudah bukan ? semoga artikel ini bisa bermanfaat untuk anda dan terimakasih.