Cara membuat auto readmore

Auto readmore merupakan salah satu cara untuk mempercepat loading blog kita, kenapa??? Karena dari sekian banyak postingan kita yang tampil pada homepage akan terpotong dengan adanya read more ini. Pada sebagian template terutama template bawaan blogspot kebanyakan belum mempunyai fasilitas ini. Oleh karena itu pada kesempatan ini kami akan coba memposting cara membuat auto readmore pada blog.
Berikut ini langkah-langkahnya:


1. Masuk ke dashbor blog sobat.

2. Klik Template >> Edit HTML >> Lanjutkan 

3. Cari kode </head>

4. Masukkan script di bawah tepat di atas kode nomor 3 

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

5. Kemudian cari kode <data:post.body/>

6. Ganti kode nomor 5 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 - <data:post.title/></a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
7. Terakhir save template lalu lihat hasilnya

Selamat mencoba, happy blogging...


Judul: Cara membuat auto readmore; Ditulis oleh rozex el-mishry; Rating Blog: 5 dari 5

0 komentar:

Posting Komentar