Cara Membuat Read More Pada Setiap Postingan Blog
Rabu, 08 Januari 2014
0
komentar
Fungsi menu Readmore ini untuk memotong satu sampai dua paragraf sehinngga postingan kita yang panjang hanya terlihat beberapa karakter saja. Jadi kesimpulannya jika kita ingin membaca seluruh isi postingan kita kilik "Readmore" atau pada blog saya ini klik "Selengkapnya....", dan Postingan yang lengkap akan terlihat. ... Sudah ngerti .?.... Kalau belum Silakan anda coba klik Home di blog ini, naaah..., terlihat hanya judul dan isi postingan beberapa karakter saja, ituuu... yang dimaksud dengan readmore,....Masih bingung ? ,... langsung saja kita praktekkan :
- Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
- Pilih ‘TATA LETAK’
- Klik "Edit HTML"
- Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap), Pada bagian atas
- (gunakan Ctrl + F) Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> klik simpan template.
<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>
- Beri tanda centang pada "Expand widget template"
- Cari kode <data:post.body/>
- Ganti kode <data:post.body/> dengan
<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>
- Simpan Template, Selesai
Catatan :
- var thumbnail_mode = "float"; (dapat dirubah berada di (float) kiri atau ganti dengan (no-float)
- summary_noimg = 250; (banyak karakter yang akan ditampilkan tanpa gambar)
- summary_img = 250; (berapa banyak karakter yang akan ditampilkan dengan gambar / thumbnail)
- img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
- img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
- READ MORE = Sesuaikan dengan selera anda
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Read More Pada Setiap Postingan Blog
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://rizaltipsntriks.blogspot.com/2014/01/cara-membuat-read-more-pada-setiap.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar