Auto Read More Pada Postingan Blog

Penataan blog sangat berpengaruh bagi kenyamanan pengunjung karena jika suatu blog yang berisi banyak postingan tetapi tidak ditata secara rapi atau diatur, maka akan memberikan kesan yang buruk. Dengan tampak panjang suatu postingan di awal, tentunya akan membuat pengunjung resah dan malas untuk membaca, terlebih lagi jika koneksi internet yang lemot.

Untuk penataan suatu blog, kita perlu menggunakan suatu fasilitas dengan membatasi atau menentukan batas-batas tertentu yang akan ditampilkan. Untuk itulah kita harus menggunakan READ MORE pada blog kita.

Berikut cara untuk menampilkan Read More secara otomatis pada blog kita :

Langkah Pertama :
Login pada blog anda, kemudian masuk pada tata letak dan pilih edit HTML.
Setelah itu akan tampil kolom HTML. Jangan lupa centang "expand Template Widget".

langkah Kedua:
Cari kode <head/>, kemudian letakkan kode dibawah ini tepat diatasnya.

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

Langkah Ketiga :
Cari Kode Berikut :
<data:post.body/>
Setelah ketemu, gantikan dengan kode dibawah ini, kemudian simpan template.

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

Tweet

Subscribe to receive free email updates: