Pasang Fitur Readmore Otomatis di Blog

Wah, bagus juga kalau blog kita rapi karna ada readmore-nya. Otomatis gambar dan tulisan dari setiap postingan sama ukuranna, sehingga enak di pandang gitu. Kaya blog saya.. Hehehe. Gak usah ngatur lagi pada saat kita psoting
Nih caranya..

1. Pergi Ke TATA LETAK - EDIT HTML (sebelum mengedit HTML sebaiknya backup dulu template anda)

2. Sebaiknya simpan template, biar gagal bisa pake template dulu

3.
Beri tanda centang pada Expand Template Widget

4. Copy Paste Kode dibawah yang banyak ini diatas kode
</head> Untuk mempercepat pencarian, gunakan find dengan tombol keyboard CTRL+F


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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. Temukan kode <data:post.body/> gunakan CTRL+F lagi.

6. Ganti kode <data:post.body/> dengan:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>


7. Simpen deh tuh template

1 Comments:

  1. thanks info'a ... kpan2 saya pasng dah... skarang lagi mles edit2 ..hehehhh

    follow u, lam knal sob...

    ReplyDelete