Cara Membuat Posting Read More Otomatis di Blogger

Udah tau kan read more? atau dalam bahasa Indonesia disebut dengan baca selengkapnya. Ini merupakan suatu hal yang penting dalam blog, ketika dalam suatu postingan yang sangat panjang kita perlu memangkas bacaan tersebut. Mengapa harus dipangkas? Menurut ane pribadi, ini akan memudahkan para pengunjung untuk memilih dan mencari postingan dalam bentuk ringkasan postingannya saja. Daripada harus menampilkan semua tulisannya yang bikin kita harus scroll mouse panjang ke bawah

Untuk membuat read more otomatis atau baca selengkapnya otomatis, langkah-langkahnya adalah :

Langkah 1
Masuk ke Dashboard -> Template -> edit HTML -> Proceed -> Kemudian Centang "Expand Widget Templates "

Langkah 2
Cari kode </head>. Copy paste kode di bawah ini, tepat di atas kode </head>.

<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode   = "float",
         summary_noimg    = 350,
summary_img      = 350,
img_thumb_height = 100,
img_thumb_width  = 120;

/******************************************
Script Posting Read-More versi 2.0 (blogspot)
(C)2008 oleh Anhvo
********************************************/
function createSummaryAndThumb(a) {
var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";
}
//]]>
</script>

Kamu bisa mengubah pengaturan :

summary_noimg = 350, (jumlah kata yang ditampikan saat dalam postingan tidak ada gambar)
summary_img = 350, (jumlah kata yang ditampikan saat dalam postingan ada gambar)
img_thumb_height = 100, (tinggi gambar yang ditampilkan)
img_thumb_width = 120; (lebar gambar yang ditampilkan)

Kamu cukup mengubah angka yang dicetak tebal di atas

Langkah 3
Cari lagi kode <data:post.body/>. Ganti kode tersebut dengan kode di bawah ini :

<!-- mulai kode readmore otomatis -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink'><a expr:href='data:post.url'>read more &#187;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
</b:if>
<!-- akhir kode readmore otomatis -->