Cara Mudah Membuat Auto Read More/Baca Selengkapnya

Sebenarnya saya sudah mulai merasa jenuh dengan dunia blogging, karena ada sesuatu yang mengganggu semangat saya untuk ngeblog. Tapi mau tidak mau saya harus tetap blogging, karena saya sudah terlanjur jatuh cinta dengan dunia blogging.

Pada postingan kali ini, saya akan membahas cara membuat auto Read More atau Baca Selengkapnya pada blogger. Mungkin banyak di antara sobat blogger yang sudah menggunakan auto Read More ini, tapi tidak ada salahnya kalau saya posting kembali untuk sobat blogger yang belum menggunakan auto read more pada blognya. Sebenarnya cara ini di request salah satu teman saya yang baru terjun di dunia blogging sama seperti saya.

Oke langsung saja bagi sobat blogger yang tertarik untuk membuat auto read more, silahkan ikuti langkah-langkah di bawah ini.

Pertama masuk ke akun blog sobat, lalu pada dashboard pilih design kemudian klik edit HTML. Temukan kode </head> kemudian pasang kode di bawah ini di Atasnya

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

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>

Kalau sudah jangan lupa save template.

Kemudian centang Expand Widget Templates dan cari kode <data:post.body/>
Kalau sudah ketemu, ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'>
<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 - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Simpan pekerjaan sobat.

Semoga bermanfaat.
Alhamdulillah...