Readmore pada blog
Judul : Readmore pada blog
link : Readmore pada blog
Readmore pada blog
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 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.
Demikianlah Artikel Readmore pada blog
Sekianlah artikel Readmore pada blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Readmore pada blog dengan alamat link https://cheatterbaru2.blogspot.com/2011/02/readmore-pada-blog.html