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

Berita Terkait :