Cara Pasang Readmore Otomatis pada Blog (Tutorial Blogger)

Sebelum memasang Readmore Otomatis pada Blogger, ada baiknya memperhatikan hal hal sebagai berikut :

1.      Download dan simpan template anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula.

2.      Jangan lupa untuk memberi tanda centang pada tulisan “Expand widget template”.

3.      Untuk memudahkan pencarian code script tekan control F, lalu copy paste codenya.

4.      Ini yang paling penting, apabila sebelumnya anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Selanjutnya untuk memasang Readmore Otomatis ini silahkan ikuti langkah-langkah berikut ini :

1.      Login ke Account Blogger Anda.

2.      Masuk ke halaman Edit HTML, lalu diatas kode letakkan script di bawah ini :

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

3.      Ganti kode  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>

3.      Simpan dan lihat hasilnya.

KETERANGAN :

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

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 yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;               :  Tinggi thumbnail dalam ukuran piksel;

img_thumb_width = 120;                 :  Lebar thumbnail dalam ukuran piksel;

READ MORE -<data:post.title/> :  Tulisan bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang readmore anda bisa menghapus code script ini “<data:post.title/>”.

Selamat Mencoba, Semoga Berhasil!!!