Pasang Read More Untuk Mempersingkat Postingan Blog

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