Cara Membuat Tombol Read More

Bagaimana cara memasang read more secara otomatis di blog ?. Ada dua pilihan membuat readmore otomatis / auto read more pada blogger ini, yakni read more menggunakan gambar dan hanya menggunakan tulisan. Untuk pertama kali,
seperti biasa ya gan pilih Dashboard,
lalu Tata Letak dan contreng tulisan Expand Widget Templates.
Selanjutnya, cari kode </head> , caranya paling cepat dengan mengetikkan  ctrl+F lalu tuliskan di pencarian. Setelah ketemu tepat diatasnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>

Setelah itu...
kita lanjutkan dengan..
Read More Button Otomatis menggunakan gambar, cari kode ini
<data:post.body/> atau
<p><data:post.body/></p> lalu hapus kode tersebut dan ganti 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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
<b:else/>
<data:post.body/>
</b:if>

Keterangan:

• Untuk kode yang berwarna kuning adalah seberapa panjang halaman potingannya.
• Untuk kode yang berwarna orange adalah untuk menyesuaikan tinggi dan lebar gambar tumbnail.
• Untuk kode yang berwarna merah adalah gambar read morenya yang bisa anda ganti dengan kode dibawah ini.

= http://i1265.photobucket.com/albums/jj502/prasetya3/Readmore3.gif

= http://i1265.photobucket.com/albums/jj502/prasetya3/more.gif

= http://i1265.photobucket.com/albums/jj502/prasetya3/more_thumb1.png

= http://i1265.photobucket.com/albums/jj502/prasetya3/bacaselengkapnya.gif

= http://i1265.photobucket.com/albums/jj502/prasetya3/29-large-allblogtools.gif

= http://i1265.photobucket.com/albums/jj502/prasetya3/23_readmore.gif

= http://i1265.photobucket.com/albums/jj502/prasetya3/10-large-allblogtools.jpg

= http://i1265.photobucket.com/albums/jj502/prasetya3/9-large-allblogtools.jpg

= http://i1265.photobucket.com/albums/jj502/prasetya3/6-large-allblogtools.png

= http://i1265.photobucket.com/albums/jj502/prasetya3/2iqzq8i.gif

• Terakhir klik Pratinjau, jika tidak ada kesalahan klik save...

nah dengan demikian silakan mencoba. Kalau ada yang ditanyakan silakan beri komentar anda...
Tank You....