Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog - Selamat malam sobat semuanya, semoga dalam keadaan baik, Aminnnn... pada kesempatan yang baik ini saya akan coba menjelaskan bagaimana caranya membuat readmore otomatis di blog.

Read more terdiri dari dua suku kata Read artinya Membaca/baca sedangkan More artinya selanjutnya/selengkapnya. Dari perjelasan singkat di atas mungkin sobat sudah mengetahui maksudnya. Nah bagi sobat yang ingin memasang readmore otomatis di blog, sobat bisa mengikuti langkah-langkah berikut ini :

1.  Bukalah blog sobat
2.  Kemudian pilih Template >> Edit HTML
4.  Carilah kode </head> untuk memudahkan tekan F3 atau Ctrl + F, kalau sudah ketemu copy pastekan script di bawah ini tepat di bawah kode </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;;
summary_noimg = 300;
summary_img = 250;
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-->

4.  Kalau sudah, sekarang silahkan sobat cari kode <data:post.body/> kalau sudah ketemu silahkan ganti kode <data:post.body/> dengan script di bawah ini (kode <data:post.body/> biasanya lebih dari satu, silahkan sobat coba satu persatu)

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

Untuk lebih jelasnya silahkan sobat lihat gambar di bawah ini

5.  Langkah terakhir klik Save Template, dan silahkan cek bloh sobat..

Kalau langkah-langkah di atas sudah benar InsyaAllah sobat akan berhasil, kalau belum berhasil jangan pernah menyerah sob.. Matur suwun dan mampir di blog saya, jangan lupa komennya sob...