Fitur “Read More” pada sebuah blog

Fitur “Read More” pada sebuah blog dapat membantu membuat sebuah blog menjadi lebih menarik, karena dengan fitur ini pengunjung blog dapat melihat keseluruhan isi blog dengan mudah. Selain itu, dengan dengan fitur “Read more” ini pengunjung mungkin akan sedikit penasaran dengan postingan singkat kita sehingga postingan tersebut akan mendapat perhatian lebih dari pengunjung.
Untuk memasang fitur “Read more “di Blogspot, yang pertma harus dilakukan adalah masuk blogspot.com kehalaman edit layout => Edit HTML.
Cari kode </head> setelah itu copy script berikut di atas kode </head> tersebut.

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

Terus simpan, setelah itu lagi cari <data:post.body/>, Kalo sudah ganti kode<data:post.body/> 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: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>

Simpan dan lihat hasilnya.

Dengan menggunakan script ini, setiap postingan yang dibuat akan otomatis ada “Read more” nya. Selain itu, Jika kita menampilkan image dipostingan, image tersebut otomatis juga dijadikan image thumbnail dengan posisi di paragraf pertama.

Atur ukuran image dan karakter sesuai yang diinginkan, selamat mencoba.

Explore posts in the same categories: info

2 Komentar pada “Fitur “Read More” pada sebuah blog”

  1. anwarxna Says:

    nice post..!!

    keren blognya, saya follow yah. hehe..

    jutaan traffic dari youtube


  2. Hey, I found your blog while searching on Google. I have a blog on online stock trading, I’ll bookmark your site.


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


%d blogger menyukai ini: