Memasang Auto Read More (Baca Selengkapnya)

Auto read more merupakan suatu link untuk membaca postingan selengkapnya. Auto read more ini berfungsi untuk memperpendek jumlah kata postingan anda pada tampilan menu awal blog anda ( biasanya pada link yang bertuliskan home atau beranda ). Sebagai contoh, klik link HOME pada blog ini.

Jumlah kata yang ingin ditampilkan pada halaman awal blog anda,bisa di atur jumlahnya. Sebelum anda memasang auto read more tersebut, pastikan anda sudah menyimpan kode html blog anda. Untuk memasang auto read more tersebut, silahkan anda ikuti langkah-langkah berikut ini :

1.        Sign in di blogger

2.        Klik menu rancangan pada blog yang ingin diubah

3.        Klik menu Edit HTML

4.        Centang pada Expand Template Widget

5.        Cari kode </head>

6.        Copy dan letakkan kode javascript dibawah ini tepat diatas 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>

7.        Kemudian cari kode <data:post.body/>

8.        Ganti kode <data:post.body/> dengan 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' target='_blank'>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9.      Klik tombol simpan template atau Pratinjau terlebih dahulu

10.  Selesai

keterangan :

var thumbnail_mode = "float";   

Letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; 

Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail

summary_img = 250; 

Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail

img_thumb_height = 120; 

Tinggi thumbnail dalam piksel

img_thumb_width = 120;  

Tinggi thumbnail dalam piksel

target='_blank' 

Dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman

READ MORE -

Dapat diganti sesukanya misalnya, Baca Selengkapnya di  atau Selanjutnya -> 

<data:post.title/>

Dapat di hapus jika anda tidak ingin menampilkan judul halaman di sebelah Read More 

Selamat mencoba