udah tau belum, Cara Membuat Readmore Otomatis

Oke kalo kemaren saya dah ngasih tau kamu cara bikin readmore klasik/jadul, sekarang saatnya saya ngasih tau cara membuat readmore otomatis. Cara ini lebih baru dan lebih mudah dari yang kemaren. So, ikutin cara-cara di bawah ini :

1. Login ke blog dulu.
2. Dari dasbor pilih tata letak (sekarang rancangan), edit html
3. Cari kode </head> , kalo dah ketemu copy script dibawah dan taruh di atasnya.

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

KETERANGAN :

var thumbnail_mode = "float";  (buat nentuin letak thumbnail, kalo ga mau make float ganti jadi (no-float)
summary_noimg = 250; (nentuin banyaknya karakter yang mau di posting kalo postingan tanpa gambar / thumbnail)
summary_img = 250; (nentuin banyaknya karakter yang mau di posting kalo postingan make gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Oh ya, kalo sebelumnya kamu dah masang readmore versi jadul, kamu harus ngembali'in dulu ke bentuk aslinya. Caranya gampang, cari kode di bawah ini, terus hapus yang warnanya merah.

<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;'/>

4. Simpen dulu bos hasil editannya
5. Kasih tanda centang di "expand widget template", terus cari kode <data:post.body/>
6. Ganti kode itu dengan kode

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

7. Simpan lagi daannn selesaaai...  kalo kemaren makan burger sekarang makan roti selai aja lah , heheheh.

Selamat Mencoba !

Script dapet dari http://www.o-om.com

Artikel Terkait