8 Feb 2010

Membuat ReadMore Authomatis

Pada Postingan kali ini saya akan berbagi informasi lagi bagi temen2 pengunjng Anto Blogs,Postingan kali ini saya akan memberitahu caranya membuat readmore automatis,jadi temen2 sudah tidak repot2 lagi harus begini harus begitu seperti memakai readmore yang manual,Oke langsung saja temen2 kita masuk ke TKP.

Dalam membuat readmore automatis kita memakai 2 langkah yaitu :

Langkah Pertama :
  • Login blogger
  • Tata Letak
  • Edit HTML (centang pada expand template widget)
Cari kode </head> setelah itu letakkan scrip dibawah ini  di atas kode </head>

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

Jika sudah selesai temen2 jangan lupa di simpan terlebih dahulu.


Langkah Kedua :

Kemudian cari kode <data:post.body/>

Lalu gantikan scrip dibawah ini dengan kode 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>

Setelah itu simpan dan lihat hasilnya ,kerenkan temen2.semoga postingan ini bermanfaat.

Ditulis Oleh : Anto Blog's // 05.28.00
Kategori:

0 komentar:

Posting Komentar

Anto Blog's berkata: silahkan isi papan komentar dibawahi ini