English French German Spain Italian Dutch
Translate Widget by Google

7.9.09

BIKIN "read more" blogspot



Sebagai blogger pemula, coolmixs juga ingin menampilkan blog layaknya para webmaster. Salah satunya memotong postingan trus dikasih lanjutan "read more". Metode ini selain mempercantik blog, juga berguna agar halaman blog terasa ringan untuk dibuka.
Setelah googling dibeberapa blog tutorial, coolmixs sempat puying bin pening... hwduuh...
karena gak semua jurus para senior berhasil coolmixs terapkan.
Padahal coolmixs dah milih kode-kode yang bisa dipakai di template blogspot versi beta saja, bukan versi klasik.

Gyah... gak apalah namana juga lagi belajar. Setelah beberapakali googling ketemu juga ama yang punya jurus ampuh dan bisa coolmixs terapkan, yaitu punya oom.com.

Untuk itu coolmixs ingin berbagi ilmu ama temen - temen soal "read more" ini.
He he.. dah curhatnya itu aja, sekarang kita langsung ke kode untuk bikin read more nyah...

Pertama, buka halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini
di atas kode </head> Kalo udah, lalu simpan aja dulu

<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>

Kemudian masih pada halaman EDIT HTML,
Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, 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 == &quot;item&quot;'><data:post.body/></b:if>


trus disimpan dan abrakadabra...


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 dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Namun kebanyakan template gratisan saat ini udah banyak yang  pake read more..
selamat mencoba.. semoga bermanfaat
Bookmark and Share


Berita Terkait :

1 komentar:

Place to modify blog on 6 Juli 2010 21.07 mengatakan...

yupsss ada kadabra,, ane jadi tahu and dapat ilmunya..

Posting Komentar

Ini adalah blog doFollow, mohon PENGERTIANNYA ya..
Klo ada salah, mohon diingatkan.. makasih dah berbagi

 
TOP Commentator
Comment Terbaru
TUKERAN LiNK

Lebih Cepat pake | Mozilla Firefox