Cara Membuat Auto Read More

Gue mau cerita dulu yahh… Kemaren sebenernya blog ni dah saya buat readmore, tapi sempat ganti template ehhh lha koq malah readmore nya jadi ilang…
So langsung deh nyari dukun paling sakti sedunia cyber…siapa lagi kalau bukan Mbah Google.(hehehe). singkat cerita ketemu di blognya master oom "cara membuat Auto Readmore."
Weh weh weh , dari namanya aja udah auto ya so pasti ntar postingan kita jadi auto readmore ndiri deh….oke daripada banyak cerita langsung aja deh tutorial dari blognya o-om ane bawa kemari
Buat yang udah terlanjur pakai Readmore versi lama harus dikembalikan dulu seperti semula, (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja) caranya , cari kode berikut ini

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

Hapus kode yang berwarna merah , setelah itu cari kode </head> ,kalo udah ketemu pasang kode berikut 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> 

Oke perjalanan kita belum selesai masih ada satu langkah lagi, selanjutnya masih dalam halaman EDIT HTML anda. cari kode <data:post.body/> kalo sudah ketemu ganti dengan kode tersebut dengan kode berikut 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

Ket :
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
kalau ada yang kurang jelas silahkan tinggalkan komentarnya…



sumber :www.o-om.com