Cara Membuat Readmore Pada Blog
Kamis, 17 Mei 2012
0
komentar
Cara Membuat Readmore Pada Blog
Setelah kemarin saya posting tentang dan , maka hari ini saya akan update artikel terbaru lagi, yaitu Cara Membuat Readmore Pada Blog
Read more atau membaca lebih, read more adalah dimana kita bisa mempersingkat suatu postingan di blog agar terlihat lebih rapi dan enak dilihat Setelah kemarin saya posting tentang dan , maka hari ini saya akan update artikel terbaru lagi, yaitu Cara Membuat Readmore Pada Blog
Oke engga usah lama-lama langsung aja gan ke tkp.
Berikut Cara-caranya :
- Log in dulu ke Blog kamu.
- Pilih Rancangan atau Tata Letak.
- Kamu pilih Edit Html
- Terus contreng kata Expand Template Widget.
- Kemudian cari kode </head> : untuk mempermudah gunakan Ctrl + F.
- Kemudian masukkan kode berikut tepat di atas </head> :
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>
- Kemudian kamu cari kode <data:post.body/>
- Ganti kode tersebut dengan kode berikut :
<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:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> »»   </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
- Kemudian kamu save ya template nya
Untuk keterangan :
var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .
Related Post:
Ditulis Oleh : Unknown ~ Deskripsi Blog Anda

0 komentar:
Posting Komentar