Cara Membuat "Read more" Otomatis untuk Blog

Jika template bawaan anda belum ada fitur Read more atau Baca selengkapnya tidah usah bingung tambahkan saja Script yang akan disajikan dalam Tutorial kali ini. Berikut cara membuat Read More otomatis untuk blog.

1. Masuk dasbord blogger >> lalu pilih Rancangan / Template >> Pilih Edit HTML.
2. Download template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan.
3. Cari kode </head>  untuk mempermudah pencarian tekan CTRL+F

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>

Sampai disini lalu Pratinjau Template untuk memastikan hasilnya, jika berhasil save template.

Kata Read more warna merah dapat anda ganti dengan kata-kata selera anda, misalnya : Baca selanjutnya.. , Baca selengkapnya. .

PERHATIAN !

" Kode <data:post.body /> lebih dari satu, maka coba kode yang kedua. Kalau tidak berhasil, coba kode yang pertama atau ketiga. "