Jumat, 20 Juli 2012

Membuat Read More pada blog kita

Terkadang kita pasti merasa saat kita membuat postingan di blog kita dimana isinya lumayan panjang pasti akan tampak jelek di halaman muka blog kita. itulah guna dari menambahkan "Read More" atau "baca selengkapnya" pada postingan kita. Tapi bagaimana cara kita membuatnya, disini ane bakal coba untuk ngasih trick2 nya.
Oke agan dan sis semua langsung aja begini caranya. cekidot...
1. login ke dasbor blog kita
2. Pilih rancangan/template/edit html. untuk dasbor lama tinggal pilih rancangan/edit html
3. centang expand template widged
4. Cari kata ini </head>, setelah ketemu diatas kata </head> copy paste script berikut

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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>

5. Kemudian cari kata <data:post.body/> dan ganti dengan script berikut


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

6. Selesai dan kata readmore siap digunakan, kata readmore bisa kita ganti sesuai keinginan kita. dan alangkah baiknya kita melakukan pratinjau terlebih dahulu sebelum kita menyimpan postingan kita

<< Good Luck >>



Tidak ada komentar:

Posting Komentar