read more otomatis

Read More atau Baca Selengkapnya pada posting adalah untuk menghemat halaman depan blog agar tidak terlalu panjang.
Jika diantara sobat blogger ada yang berkeinginan untuk Pasang Read More Otomatis pada blog sobat, silahkan ikuti langkah-langkah berikut :

Login ke Blogger klik Rancangan klik Edit HTML kemudian cari kode </head>
Tips : Untuk mempercepat pencarian anda bisa gunakan tombol (F3)

jika sudah ketemu copy kode script dibawah ini dan paste di atas kode tersebut
kalau sudah jangan lupa di SIMPAN TEMPLATE terlebih dahulu.

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

Masih dalam halaman Edit HTML beri tanda centang pada kotak di samping tulisan Expand Template Widget lalu temukan kode <data:post.body/>
kalau sudah ketemu ganti kode tersebut 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'> Read More &#8594; <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Keterangan : Sobat juga bisa menentukan letak thumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan thumbnail serta tinggi dan lebar thumbnail pada postingan dengan cara merubah kode yang berwarna biru di atas.

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 &#8594; <data:post.title/>: tulisan Read More bisa diganti misalnya dengan "Baca Selengkapnya" dan apabila anda tidak ingin menampilkan judul dibelakang Read More, sobat bisa menghapus kode script ini <data:post.title/>

Selamat mencoba