membuat read more otomatis pada blog

oke dalam postingku kali ini aku akan membahas cara membuat read more otomatis,nah read more otomatis ini memiliki kelebihan sobat yaitu :
1. postingan akan terbagi menjadi 2 bagian secara otomatis.
2.buat para pemula yaaaa... seperti saya ini contohnya g ribet harus otak atik scriptnya segala hehehehe

nah untuk bisa mengunakan read more ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.

oke langsung aja kita menuju langkah-langkahnya :

1.Silahkan login ke blogger terlebih dahulu.
2.Klik Tata Letak.
3.Kemudian klik Edit HTML.
4.Centang Expand Template Widget.
5.Letakkan kode berikut ini tepat diatas kode </head>:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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> 

1. 6.Kemudian hapus kode :
   
   
   <data:post.body/> atau <p><data:post.body/></p>
   
   
2. 7.Ganti kode tersebut dengan kode berikut 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>

   <a expr:href='data:post.url'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/S8sMD7pBeXI/AAAAAAAADeE/LtHqW8Kc3PE/readmore_thumb%5B1%5D.gif'/></a>
   

   </b:if>

   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   
   
   
3. 8.Kemudian Simpan Template.

Keterangan :

• summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
• summary_img = 360 –-> untuk tinggi postingan dengan gambar.
• img_thumb_height = 120 –> tinggi gambar.
• img_thumb_width = 150 –> lebar gambar.
• Script yang berwarna merah -> url gambar sobat....