Pages

Subscribe:

Tuesday, June 5, 2012

Cara Membuat Read More Otomatis Pada Blog

Fitur readmore otomatis ini sangat membantu, terutama bagi blogger yang artikelnya sudah berjumlah sangat banyak sehingga tidak perlu mengedit satu per satu. Jika sobat tertarik untuk menerapkannya di blog sobat, berikut ini adalah cara membuat read more otomatis pada blog :
1. Log in pada akun blogger sobat
2. Buka Template, Edit HTML, Proceed
3. Beri centang Expand Widget Templates
4. Cari kode </head> dengan menggunakan CTRL + F biar lebih cepat
5. Copy-paste script berikut tepat diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>


<script type='text/javascript'>

//<![CDATA[

/******************************************

Script Read More Otomatis Pada Blog By Atmojo-Site


Kunjungi http://atmojo-site.blogspot.com/

********************************************/

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>
 
6. Cari kode <data:post.body/> dengan menggunakan CTRL + F
7. Ganti kode <data:post.body/> dengan script dibawah 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>

8. Save Template

NB : Anda dapat mengganti script yg berwarna merah diatas sesuai keinginan anda.
Semoga bermanfaat.

0 comments:

Post a Comment