Kamis, 24 Juni 2010

Cara Membuat Read More Otomatis Pada Blog

Sebelumnya untuk yang sudah membuat read more versi lama sebaiknya untuk kodenya dikembalikan dulu seperti semula...
Caranya hapus kode berwarna merah dibawah ini..
"(Catatan : Tidak semua template sama, mungking kita bisa sesuaikan saja)"


<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Kalau sudah selesai kita simpan terlebih dahulu...
Sekarang kita lanjutkan cara membuat Read More Otomatis...
  • Carilah kode seperti dibawah ini

</head>

"(Catatan : Untuk mempermudah pencarian kode tersebut Anda bisa mencarinya dengan menekan 'tombol Ctrl + F')"
  • Kalau sudah ketemu, copy paste kode dibawah ini tepat di atas kode yang anda cari tadi.

<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)2010 by inuy4sha

visit http://www.inuy4sha.cz.cc
********************************************/
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>

  • Nah kalau sudah,, jangan lupa disimpan....
  • Selanjutnya beri tanda centang pada "Expand widget template" lalu cari kode seperti dibawah ini.

<data:post.body/>

  • Kalau sudah,, timpah/ganti kode yang anda cari tadi 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/>
<style>.fullpost{display:inline;}</style></b:if>

  • trus klik simpan template dan lihat perubahannya.....
good luck...!!!!!

Tidak ada komentar:

Posting Komentar