Membuat "Read More" Otomatis Tanpa Page Break

Ini adalah script untuk membuat "Read more" atau "Baca selengkapnya" secara otomatis tanpa perlu masukin page break atau "Insert jump break" saat membuat postingan. Jadi bisa menghemat waktu.

Sebenernya script ini aku comot dari template yang baru kukenakan pada blogku yang ini. Dan sudah kucobakan pada blog lain. Jadi, semoga nggak ada masalah.

Oke, langsung aja, silahkan ikuti langkah-langkah mudah berikut ini.

Login ke Blogger > Desain > Edit HTML. Centang Expand Widget Templates. Jangan lupa Download Full Template untuk jaga-jaga.

Lalu cari kode ini:

<data:post.body/>

Ganti kode tersebut dengan kode berikut ini:

<p><script type='text/javascript'>

summary_noimg = 800;

summary_img = 650;

img_thumb_height = 150;

img_thumb_width = 200; 

</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>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<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>

<div><a expr:href='data:post.url'>Baca selengkapnya &#187;</a></div>

</b:if>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>

Keterangan:

summary_noimg = 800; (jumlah karakter yang ingin disingkat pada postingan tanpa gambar)

summary_img = 650; (jumlah karakter yang ingin disingkat pada postingan dengan gambar)

img_thumb_height = 150; (tinggi gambar thumbnail )

img_thumb_width = 200; (lebar gambar thumbnail)

Kamu juga bisa ganti kata-kata "Baca selengkapnya" dengan kata-kata lain seperti "Read more," "Lebih lanjut," dan sebagainya. Jika ingin menggantinya dengan gambar, ganti dengan kode ini:

<img src="URL GAMBAR"></img>

Semoga bermanfaat.