Cara Membuat Readmore Otomatis

 Mungkin telah banyak yang membahas cara ini di blognya masing-masing, tetapi tidak ada salahnya zona-klik mempublishnya.

Dengan adanya readmore otomatis, homepage blog kita akan terlihat rapi dengan ketentuan tinggi dan lebar yang bisa di atur dengan mudah, juga menampilkan thumbnails gambar di sampingnya.

Sebelumnya zona-klik minta maaf jika cara penyampaian di artikel ini kurang dipahami dan dimengerti oleh sobat blogger, karena itulah kemampuan dan pengetahuan zona-klik membahas cara membuat readmore otomatis di blogspot.

Tanpa perlu panjang lebar bercerita, alangkah baiknya langsung ke TKP, cekidot.........

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis diatas kode tersebut.

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

KEDUA, cari kode html berikut ini :

<data:post.body/> atau <p><data:post.body/></p>

ganti kode tersebut dengan kode di bawah ini :

<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; border:1px solid #fff;'>

<a expr:href='data:post.url'><img src='http://i825.photobucket.com/albums/zz175/ngoeg/readmore.gif'/></a></span>

</b:if>

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

KETIGA, klik save template

Untuk melihat hasilnya coba buka halaman home page blog sobat, jreng...jreng...jreng...readmore otomatis telah tampil dan blog sobat terlihat lebih menarik sehingga menimbulkan daya tarik tersendiri bagi pengunjung. 

maka hasilnya akan seperti ini:

Keterangan:

1. Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaikan.

2. Untuk link gambar http://i825.photobucket.com/albums/zz175/ngoeg/readmore.gif  bisa anda ganti sesuai dengan keinginan,atau bisa anda cari di google dengan keyword Readmore

3. summary_noimg = 250; adalah jumlah karakter yang tampil, 

    summary_img = 250; adalah gambar yang tampil di depan konten post jika posting menggunakan              gambar, 

*intinya summary merupakan jumlah kata yang di tampilkan sebelum kata readmore di klik.

img_thumb_height = 120;

img_thumb_width = 120; adalah tinggi dan lebar gambar yang tambil di depan konten post.

*)Note: "apakah anda tidak menemukan <data:post.body/> atau <p><data:post.body/></p> saat find/menemukan/mencari/ctrl+f di template anda? klik ini
<data:post.body/> atau <p><data:post.body/></p>  Tidak Ada Pada Template Blog 

atau Halaman Statis Karena READMORE Otomatis