Membuat read more otomatis untuk blog

Membuat read more otomatis untuk blog-Sobat Blogger semua, mohon maaf bila terlau lama tidak pernah update berita maupun artikel, itu disebabkan feelling kurang bagus, pikiran gak konsen. Dan kali ini kita bersama-sama membahas cara membuat read more otomatis untuk blog.

Bagi sobat-sobat yang belum mempunyai fitur read more templatenya, sekarang kita bahas bersama ya. Disamping untuk mempercantik tampilan blog, juga memperpendek dan memperluas ruang halaman posting, kita juga menggiring pengunjung klik halaman kita dua kali untuk satu artikel atau postingan. Berikut cara membuat Read More otomatis untuk blog, ikuti saja loangkah-langkah dibawah ini

1.Pertama sobat masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.
2.Jangan lupa centang Expand Template Widget.
3.Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.

Masukan kode berikut tepat ditas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4.Belum selesai, cari lagi kode :  <data:post.body/>
Ganti kode  <data:post.body/>, dengan kode di bawah ini :

<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' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

5.Save template sobat.
Untuk melihat hasilnya, pratinjau dan lihat dulu, tulisan Read more warna merah dapat anda ganti dengan kata-kata anda, misalnya : Baca selanjutnya, seterusnya dan lain-lain. Semoga bermanfaat dan sukses selalu. (Roelly R)