300x300

Tuesday, November 8, 2011

Cara Membuat Read More Otomatis Pada Blogger / Blogspot

Kali ini saya akan memberikan tips agar blogspot akan otomatis memotong kalimat pembuka jika telalu panjang. Atau biasa juga di sebut "Read More" otomatis atau auto"read more". Cara ini juga berguna bagi anda yang malas menggunakan "read more" secara manual.

Berikut ini adalah Cara Membuat Read More Otomatis Pada Blogger / Blogspot.



1. Log in di Blogger.com
2. Pilih edit HTML, klick Expand Widget Templates

3. cari kode atau ganti kode tersebut 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:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

4. carilah kode dan copy kode di bawah ini letakkan sebelum kode

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by TanThowi.Com
visit http://tanthowi.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>


5. kemudian Save Template.
6. selesai.

Demikian Cara Membuat Read More Otomatis Pada Blogger / Blogspot. Semoga bermanfaat.

0 comments:

Post a Comment

TERIMAKASIH ATAS KOMENTARNYA.
Kapan-kapan komentar disini lagi ya?????