Membuat Read More Otomatis

Selamat siang para sobat blogger yang udah pada master. Kali ini saya akan memberikan tips cara membuat read more otomatis pada artikel blog kamu. Memasang read more otomatis ini akan membuat loading blog sobat lebih cepat di banding kan dengan blog yang tidak menggunakan read more. Selain itu read more bisa membuat penasaran para pembaca blog sobat untuk melihat bagaimana kelanjutan artikel yang sobat buat. Ok deh langsung aja yah nanti kelamaan nunggu nya ;)

1. Login ke blogger kamu
2. Klik Rancangan >> Edit HTML
3. Cari kode </head>, untuk lebih mudah sobat gunakan CTRL + F
4. Jika sudah ketemu copy kode berikut

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

5. Paste kan kode tadi ke atas kode </head>
6. Kemudian, sobat cari lagi kode <data:post.body/>
7. Jika sudah ketemu, gantikan kode <data:post.body/> tadi dengan kode berikut

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

8. Simpan template sobat dan lihat hasil nya :)

Tulisan Read More..... bisa sobat ganti dengan tulisan lain seperti Selengkapnya....... atau yang lain. Atau bisa juga di ganti dengan gambar, Pengen tau cara nya? Lihat di Cara Mengganti Tulisan Read More Dengan Icon Gambar

Selamat Mencoba :D

Share 'Membuat Read More Otomatis' On ...