Membuat Readmore Otomatis Blogspot

By: Unknown on Thursday, January 23, 2014

Bagi blogger pemula biasanya dalam memulai ngeblog, pastinya menemui banyak sekali kesulitan dalam menggeluti dunia blogging. Bingung ini dan itu lah, salah satu hal yang sering ditanyakan oleh blogger pemula ialah bagaimana mengatur postingan agar terlihat rapi dan teratur seperti blog-blog profesional. Hal kerapian dan teratur ini sangat berkaitan dengan konten dari blog itu sendiri. Dalam hal ini saya ingin memberikan tutorial bagaimana mengatasinya khususnya "readmore otomatis". 

Postingan akan terlihat rapi dan teratur jika kita menggunakan "readmore otomatis", karena isi konten dari blog kita akan ditampilkan sebagian dan ini yang membuat pengunjung penasaran untuk membaca lebih lanjut postingan kita.

Oke, mari kita ikuti langkah-langkah di bawah ini:

1. Buka blog sobat, pilih tab "TEMPLATE", kemudian pilih tab "EDIT HTML".

2. Cari kode </head>, gunakan Ctrl+F untk memudahkan pencarian.

3. Kemudian, masukkan kode di bawah ini tepat di atas kode </head>

<!--ReadMore http://ngeblog-i.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;;
summary_noimg = 300;
summary_img = 250;
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 End-->

*Keterangan:  

• summary_noimg = 300; (banyaknya huruf yang ditampilkan tanpa gambar)
• summary_img = 250; (banyaknya huruf yang ditampilkan dengan gambar)
• var thumbnail_mode = &quot;yes&quot;; (yes -dengan gambar, no -tanpa gambar)

4. Save template.
5. Selanjutnya cari kode <data:post.body/>
6. Ganti kode <data:post.body/> dengan kode berikut ini: 

<!-- Auto read more Begin -->
<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 End -->

*Keterangan:

•  <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a> (kata Baca Selengkapnya bisa diganti sesuai keinginan)

7. Simpan template, lihat hasilnya.

Demikian sedikit tutorial dari saya, semoga bisa membantu kawan-kawan dalam memperindah blognya. Terimakasih!