Cara membuat READ MORE di Blogger atau Blogspot

Cara membuat READ MORE di Blogger atau Blogspot – Bagi anda yang sedang berlatih membuat blog pribadi atau website menggunakan Blogger / Blogspot mungkin masih kebingungan untuk membuat readmore secara otomatis di blogspot mereka, walaupun sudah banyak sekali artikel-artikel yang mebahas tentang bagaimana cara membuat readmore otomatis. Hal ini disebabkan mungkin karena banyaknya artikel yang copy paste padahal si pemilik blog sendiri tidak faham dengan caranya. Saat ini saya akan menjelaskan bagaimana cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membikinnya. Read More itu apa sih?. Read more adalah penggalan dalam sebuah artikel atau berita yang di tulis dalam Blog kita atau website kita, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata "READ MORE", "BACA SELANJUTNYA”, ”BACA SELENGKAPNYA”, dan lain sebagainya.

• Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
• Cari Kode </head>.
• Copy paste kode dibawah ini tepat di atas kode </head>

<!--ReadMore-->

<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 images, no -tanpa images
summary_noimg = 300; //banyaknya kata jika tidak ada gambar
summary_img = 250; //banyaknya kata 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-->

• Save Template anda.
• Kemudian scroll template anda kebawah cari kode seperti berikut:

Keterangan: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

• Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
• Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

• Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
• Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
• selanjutnya akan terbuka kode kode yang lain.
• geser atau scrol ke bawah dan cari kode 

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

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

• Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.