Membuat Read More (Baca Selengkapnya)
Di Posting Oleh Aorama on 7:07 AM
Kadangkala kita memposting dengan panjangnya mungkin karena kita sedang happy atau sekedar iseng... nah rasanya sebagian besar pengunjung termasuk saya udah malas kalu isinya tulisan puanjang banget... tul gak?? nah ini ada cara kita membuat sebuah penyingkat dari postingan kita biar para pembaca blog kita penasaran... biarin aja...
dan cara ini akan menampilkan gambar di sebelah tulisan kita.. ya itu kalo ada gambarnya... dan read morenya akan muncul title dari postingan kita
dan cara ini akan menampilkan gambar di sebelah tulisan kita.. ya itu kalo ada gambarnya... dan read morenya akan muncul title dari postingan kita
lanjut yah.. ini dia contohnya...
Trus gimana donk caranya... caranya ini aku dapat dari OOm berikut adalah langkah2nya
1. login blogger
2. Masuk ke layout dan edit HTML
3. Download Ful Template... ini buat ngebackup template blog anda yang udah ada..
4. Lalu klik Expand Widget Template
5. Cari kode </head> lalu letakkan script dibawah ini diatas kode </head>
6. Cari kode <data:post.body/>
7. udah ketemu lom?? kalo udah ganti kode <data:post.body/> dengan kode di bawah ini
Warna Merah dapat anda ganti dengan selain Read More misalnya baca selengkapnya....
8. Kalo udah beres terus di save deh....
1. login blogger
2. Masuk ke layout dan edit HTML
3. Download Ful Template... ini buat ngebackup template blog anda yang udah ada..
4. Lalu klik Expand Widget Template
5. Cari kode </head> lalu letakkan script dibawah ini diatas kode </head>
<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>
6. Cari kode <data:post.body/>
7. udah ketemu lom?? kalo udah ganti kode <data:post.body/> dengan kode di bawah 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");</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>
Warna Merah dapat anda ganti dengan selain Read More misalnya baca selengkapnya....
8. Kalo udah beres terus di save deh....
Artikel lain yang berhubungan :
Subscribe to:
Post Comments (Atom)
0 comments for this post