Memasang Auto Read More di Halaman Blog

Setelah asyik-asyik edit blog, saya sempat kesulitan dengan mengatur halaman awal blog, karena ketika saya buka halaman blog saya, posting saya 100% terbuka semua. Alhasil halaman blog saya memanjang ke bawah. Kalau melihatnya saja sudah membuat saya pusing. Ketika mencari-cari cara untuk menghemat halaman blog, saya tak sengaja menemukan caranya di http://oog-4u.blogspot.com/ . Ketika saya coba ternyata berhasil juga.

Caranya simpl kok, anda cukup menambahkan kode ini di atas 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>
Yang berwarna merah bisa anda ganti-sesuai keinginan anda;
var thumbnail_mode = "float"; (letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (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)

Setelah itu cari kode <data:post.body/> dan ganti 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<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>

Kata READ MORE bisa anda ganti sesuai dengan keinginan anda. Bisa baca selengkapnya atau selengkapnya, dll.
Setelah itu SAVE, lalu lihat hasilnya.

TERIMA KASIH SUDAH MEMBACA POSTING DI ATAS. JANGAN LUPA TINGGALIN JEJAK DI KOMENTAR YA? ^_^

Post a Comment

Mohon Untuk Tidak Mencantumkan Nama Anonim Anda. Terima Kasih.