Belajar Ngeblog : Memasang Program "Read More" Otomatis

Keuntungan memasang program "Read More" atau "Baca selengkapnya" pada blog:

• Blog kamu kelihatan lebih rapi.
• Meski dalam satu halaman ditampilkan lebih dari satu artikel, kecepatan loading page tetap bagus.

Bagaimana cara memasang program "Read More"?

Sebenarnya blogger.com sudah menyediakan program tersebut, yaitu "Insert jump break". Caranya, saat kamu membuat posting, blok bagian awal artikel (misal paragraf pertama), kemudian klik tab "Insert Jump Break".

Tapi cara ini memiliki kelemahan, yaitu:

• Caranya manual, artinya tiap menulis artikel, kita harus melakukan proses diatas. Pengalaman saya, suka lupa. Jadi tampilan blog malah tambah kacau, ada yang pake program "Read More" dan ada yang full artikel.
• Karena in manual, jadi jumlah kata (panjang artikel) yang kita blok untuk masing-masingartikel kadang berbeda, ini berpengaruh juga pada tampilan blog.

Agar hal tersebut tidak terjadi, maka kita harus memasang program "read more" otomatis. Berikut langkah-langkahnya:

- Kamu masuk ke akun blog kamu

- Klik tab "Rancangan" atau "Design" atau "Tata Letak".

- Klik tab "Edit HTML", ari kode </head> kemudian letakan script dibawah ini di atas kode </head> Langsung copy paste aja 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[
/******************************************
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>

Kalo sudah, jangan lupa di simpan terlebih dahulu.

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>

Jika sudah silahkan disimpan dan lihat hasilnya.
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)

Semoga bermanfaat dan Selamat mencoba.

Sumber : o-om.com

Baca Selengkapnya - Belajar Ngeblog : Memasang Program "Read More" Otomatis