Category : Labels: Blog Tutorial, Template, Tips Trik
Sebenarnya artikel mengenai cara memasang Auto Readmore sudah banyak sekali bertebaran didunia maya ini. Tapi, dalam rangka guna melengkapi artikel blog ini dan berhubung juga ada seorang sahabat blogger yang bertanya, akhirnya sekalian saja dech di Post. hehe.
Readmore merupakan salah satu blog hack yang lumayan digandrungi bagi pemain blog khususnya dalam platform Wordpress dan Blogspot. Dengan fungsi "Readmore" kita bisa menghemat halaman depan blog kita dengan maksud kita bisa menunjukkan banyak post dalam satu halaman depan. Lagipula penggunaan fungsi "Readmore" ini bisa mengurangi penggunaan bandwith yang besar. Karena isi artikel blog di load hanya separuh dari seluruhnya. Berbeda bila kita tidak menggunakan fungsi "Readmore", pasti blog akan tampak panjaaang turun kebawah. Walaupun mungkin sudah diatur berapa post yang akan ditampilkan dalam halaman depan, tapi kalau tulisannya panjang ya sama saja donk. ehehe :D .
Nah, lalu bagaimana cara menggunakan fungsi Readmore ?.
Pertama, kita bisa menggunakan fungsi "Jump-Break" di teks editor blogspot yang baru dengan mengklik tombol/ icon "Jump-Break" yang biasanya terletak di pojok paling kanan atas dari menu teks editor blogspot setelah anda menetapkan kursor pada akhir teks yang akan anda pakai sebagai ringkasan artikel anda.
Kedua, bisa dengan cara memasukkan kode tag <!-- more --> dalam mode Edit HTML pada posisi akhir/batas teks yang ingin anda tampilkan sebagai ringkasan posting anda.
Lalu, untuk kustomisasinya agar kata-kata "Readmore" nya sesuai dengan yang anda inginkan, misalnya diganti dengan kata "Baca Selanjutnya" , "Lanjutkan" bisa dengan mensetting pada widget blog post pada tab Layout (Page Element) akun blogger anda.
Untuk yang Ketiga, anda bisa menggunakan fungsi Auto-Readmore. Tentu fungsi ini belum ada pada blogspot. Maka dari itu anda perlu untuk menambahkannya sendiri. bila ingin menambahkannya, berikut caranya.
Tentu anda harus sudah login dalam akun blogger anda. Dan tuju ke halaman Layout ► Edit HTML. Jangan lupa untuk mencentangi kotak kecil bertuliskan "Expand Widget Templates". Cari kode </head> . Copy-Paste kode dibawah ini di atas kode </head> 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>
Lalu, cari dan temukan kode <data:post.body/> . Anda bisa menggunakan CTRL+F untuk mencari kode tersebut.
Kalau sudah ketemu 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 == "item"'><data:post.body/></b:if>
Silahkan di simpan dahulu. :) . Sampai disini, sebenarnya anda sudah selesai, tapi agar tampilannya bisa sedikit rapi, berikut beberapa tips dan triknya.
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 gambar dalam piksel)
- img_thumb_width = 120; (Thumbnail 'lebar gambar dalam piksel)
Tips dan trik tambahan.
- Hilangkan kode <data:post.title/> . Yaitu kode yang terletak di sebelah kanan Tulisan READMORE. Agar nantinya link readmore anda tidak diikuti dengan judul posting anda. Misalkan kata readmorenya "Baca Selanjutnya" lalu Judul Postingnya "Cara Membuat Blog" maka menjadi "Baca Selanjutnya Cara Membuat Blog". Maka, bila judul posting anda panjang, maka link readmore anda akan menjadi panjang juga. Jadi, lebih baik dihilangkan saja.
- Ganti Tulisan READMORE dengan kata yang anda inginkan.
- Ganti kode left dalam kode <span class='rmlink' style='float:left'> menjadi right. Sehingga akan tempak seperti ini kodenya. <span class='rmlink' style='float:right'> .Ini akan membuat link READMORE anda berada disebelah kanan bawah post.
- Atau bila anda ingin menggunakan gambar sebagai link READMORE, ganti kata READMORE dalam kode di atas dengan kode berikut,
<img alt='Read More' src='http://i792.photobucket.com/albums/yy204/shamanking96/12-mini-allblogtools.jpg'/>
Gantii URL gambar yang dipakai, misal http://i792.photobucket.com/albums/yy204/shamanking96/12-mini-allblogtools.jpg dengan URL gambar yang anda inginkan.
Untuk diperhatikan, gambar pertama dalam posting lah yang akan digunakan sebagai gambar pembuka dan sebagai ikon sebuah posting (artikel) anda.
Save template anda. Bila ada yang belum atau kurang jelas silahkan bertanya lewat komentar. Atau bahkan dalam post atau post (artikel) ini ada yang kurang, mohon petunjuknya. Terima kasih :) .
Selamat Mencoba dan Semoga berhasil.
Script Auto-Readmore diambil dari blognya Om Agus Ramadhani .
