Recent Posts

Selasa, 19 Mei 2009

Pasang Read More Untuk Mempersingkat Postingan Blog

read_moreWalaupun sudah banyak yang membahas cara memasang Read More (Baca Selengkapnya) untuk mempersingkat Postingan Blog, tapi tidak ada salahnya saya bahas di sini karena baru saja saya pasang fasiltas read more ini di blog saya. Memang secara default fasiltas read more ini tidak disediakan oleh blogger tapi bisa kita siasati dengan menambahkan sedikit kode HTML ke dalam template kita.

Fungsi Read More juga mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. bisa disebut dengan fasilitas image thumbnail bisa diliat di blog ini.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

Ok mudah-mudah di mengerti. untuk lebih jelasnya kita langsung praktikan saja.

Pertama : Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML

Kedua    : Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Template

Ketiga   : Pada halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu

Kempat : Langsung copy paste kode dibawah ini:

 

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

Kelima : Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah 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>

Silahkan disimpan dan lihat hasilnya :D

Keterangan:

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)

Selamat mencoba…

 

 

sumber: http://www.o-om.com/

32 komentar:

mantap-mantap informasinya sobat, di coba dulu yah,...

udah di coba di blog saya.
ternyata bisa.. berkunjung ya...

bagusnya tiap blog ada readmore biar artikel yg ditampilkan di halaman pertama blog-bisa banyak :D

susah mencari data post bodynya....ga ketemu

caranya pake CTRL+F lalu ketikan tulisan tersebut dlam kotak yg trsedia

makasih mas... saya udah coba mas & berhasil...

jgn lupa kunjungi blog ane jg ya mas...

www.macanleuser.blogspot.com

kenapa sy ngga ada

Tq sob bwt infonya... :)

Komentar ini telah dihapus oleh penulis.

makasih infonya bos ini yang kucari selama ini...

wah mantab gan ilmunya, semoga mendapatkan ganjaran yang setimpal dari pencipta karna telah membagikan ilmunya :)

Thanks Sob
Masih Belajar Gue |^_^|

thanks ya punyaku udah bisa

keterangan yang terakhir tu maksudnya gimana gan?

makasi Gan....
moga sukses selalu......

Thanks gan, nice info
by: www.s-andi-m.co.cc

mantab x postinganya sob,,,thanks

setelah ketemu HEAD trus data yang di atasnya kita tambahin script yang di kasih.. tapi pas di simpan error..

begitu pula yang


saya hapus semua datanya saya ganti dengan yang anda kasih error juga...

mohon bantuannya...

salam
alat bantu dengar

mas kok postingan yang panjang masih ada gimana cara ngilangin nya ya biar Read More gitu ...

mantap gan postingannya
thank

kunjungi blog ane ya kawan
http://ruangkosong09.blogspot.com

data post body

tidak di temukan

hanya sekedar memberi info untuk mencari post body.y..

1. pada "edit HTML" klik kursor di dalam HTML tersebut..
2. tekan tombol " Ctrl + F".
3. lalu ketik "".
maka secara otomatis akan di tampilkan,
selamat mencoba.. :)

Poskan Komentar

Silahkan Tulis Komentar Anda disini...