Cara Buat Readmore Blog, Blogspot

Kamis, 22 April 2010

Apa yang dimaksud Readmore ?...
Saya Jelaskan sedikit yaa,...

Fungsi menu Readmore ini untuk memotong satu sampai dua paragraf sehinngga postingan kita yang panjang hanya terlihat beberapa karakter saja. Jadi kesimpulannya jika kita ingin membaca seluruh isi postingan kita kilik "Readmore" atau pada blog saya ini klik "Selengkapnya....", dan Postingan yang lengkap akan terlihat. ... Sudah ngerti .?.... Kalau belum Silakan anda coba klik Home di blog ini, naaah..., terlihat hanya judul dan isi postingan beberapa karakter saja, ituuu... yang dimaksud dengan readmore,....

Masih bingung ? ,... langsung saja kita praktekkan :

Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
Pilih ‘TATA LETAK’
Klik "Edit HTML"
Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap), Pada bagian atas
(gunakan Ctrl + F) Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> klik simpan template.

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

Beri tanda centang pada "Expand widget template"
Cari kode <data:post.body/>
Ganti kode <data:post.body/> dengan

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

Simpan Template, Selesai

Catatan :

var thumbnail_mode = "float"; (dapat dirubah berada di (float) kiri atau ganti dengan (no-float)
summary_noimg = 250; (banyak karakter yang akan ditampilkan tanpa gambar)
summary_img = 250; (berapa banyak karakter yang akan ditampilkan dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
READ MORE = Sesuaikan dengan selera anda