Read More Otomatis

Berikut ini cara membuat Read More Otomatis seperti yang di terapkan di wow-sip.blogspot.com.

Caranya adalah :

1. Silahkan login ke blogger dengan ID anda
2. Klik Rancangan
3. Klik Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Silahkan klik Download Template Lengkap, ini untuk berjaga-jaga kalau nanti kita melakukan kesalahan edit, kita masih punya back-up data original untuk mengembalikan setelan awal.
6. Cari kode berikut ini </head>.
7. Copy Paste kode berikut ini persis di atas kode </head>  dan jangan lupa untuk disimpan terlebih dahulu.

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 200;

summary_img = 200;

img_thumb_height = 80;

img_thumb_width = 80;

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

8.  Masih pada halaman EDIT HTML , Beri tanda centang pada "Expand Template Widget"  lalu temukan kode seperti ini : <data:post.body/> Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini :

<!-- Auto read more Start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<style>.fullpost{display:inline;}</style>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

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

<a class='more' expr:href='data:post.url'>Read more ...</a>

</b:if>

</b:if>

<!-- Auto read more End -->

9.   Klik tombol Simpan Template
10. Selesai 




Keterangan :

1. var thumbnail_mode = "float"; (menentukan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

2. summary_noimg = 200; (Menentukan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

3. summary_img = 200; (Menenentukan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

4. img_thumb_height = 80; (Thumbnail 'tinggi dalam piksel)

5. img_thumb_width = 80; (Thumbnail 'lebar dalam piksel)


Demikianlah tutorial ini saya dapatkan dari Adipremana. Terimakasih buat Adipremana.