Cara Membuat Auto Read More di Blog

Fitur read more adalah sebuah fitur yang memungkinkan setiap artikel yang tampil di halaman utama blog akan terpotong artikelnya dan ada link yang menuju ke artikel yang tidak terpotong.

Fitur read more ada yang manual dan otomatis. read more manual, kita harus mengatur sendiri di bagian mana yang akan dipotong dalam artikel. sedangkan fitur read more otomatis, kita tidak perlu mengatur potongan artikel. fitur read more sendiri juga akan menambah keindahan blog.

Disini kita akan membahas cara memasang read more secara otomatis, diperlukan penanaman script pada template, namun tidak terlalu rumit. Kelebihan read more otomatis adalah kita tidak perlu memotong-motong artikel untuk menentukan bagian mana yang akan ditampilkan dan tidak ditampilkan. Berikut ini cara membuat read more otomatis atau auto read more.

Tutorial Pemasangan Read More

• Masuki Login blogger anda


• Klik Tata Letak, kemudian Klik Edit HTML.


• Contreng checkbox Expand Widget Template.


• Copy paste kode berikut ini sebelum atau di atas kode </head> :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

• Cari kode <data:post.body/> lalu ganti dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Klik Simpan

Fitur Read More otomatis sudah jadi

"GOOD LUCK"