Membuat readmore kreasi sendiri

Hai sahabat blogger semua.....salam Damai......
Nah...Judul di Atas yang akan kita bahas dalam tutorial kali ini

Membuat readmore Memang Mudah......Selain mudah kita
Juga Bisa Mengutak - Atik nya.....Nah...Membuat Readmore

Kali ini.....Sama Saja dengan Membuat Readmore yang Biasanya
Namun. .. . .Membuat readmore kali ini Sedikit Berbeda.........

Karena saya Sudah Mengutak - atik Kode nya........Biar Kelihatan Lebih
Indah saja. . . . .Dan kita Juga Pasti senang Bila.......Apa yang kita inginkan

Itu bisa kita Laksanakan.........Nah begitu juga dengan saya.....,,...
saya suka utak -atik Kode html Walau Kadang Selalu salah.......

Tapi saya gak pernah menyerah, saya terus mencoba Hingga Berhasil
Jadi Anda, Jangan Menyerah sebelum Apa yang Anda Inginkan...itu tercapai....

Itu hanya sedikit cerita dari saya....
Untuk Tutorial nya silahkan Ikuti Langkah-Langkah nya di bawah ini

1. Log in ke blog anda

2. KLik Rancangan / Layout

3. KLik Edit HtmL

4. Cari Kode <body>

Dan Letakan kode di bawah ini Di atas kode <body>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 200;
img_thumb_width = 200;
</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>

5. SimpaN Template

6. Setelah Anda simpan Template Lalu Centang Expand Template widget

Dan Cari Kode di Bawah ini

<data:post.body/>

Setelah ketemu Anda Hapus kode Tersebut dan Ganti dengan Kode 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:right;padding-top:20px;'><a expr:href='data:post.url'><div style='width:200px; height:20px; background:url(http://www.colorhealing.com/green_revolving_star.gif) repeat-x center; color:gray; text-align:center; text-shadow:1px -1px black; font-weight:bold; -moz-border-radius:5px;
-webkit-border-radius:5px; -goog-ms-border-radius:5px;'>READMORE....!!</div></a></span>

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

7. Simpan Template Anda

Keterangan:

summary_noimg = 500; Artinya Artikel di potong tanpa menampilkan gambar...

summary_img = 500;   Artinya Artikel di potong dengan menampilkan gambar...

img_thumb_height = 200;   Artinya  tinggi gambar...di artikel

img_thumb_width = 200; Artinya  Lebargambar...di artikel

width:200px; Adalah Lebar gambar......readmore

height:20px;   Adalah Tinggi gambar......readmore

http://www.colorhealing.com/green_revolving_star.gif Adalah gambar background nya anda bisa ganti dengan

Gambar yang anda suka....

READMORE....!! Adalah Kata - kata nya Anda bisa ganti dengan Kata2 Anda sendiri....

Saya kira Cukup Sekian Dari system of blog Saya ucapkan terima kasih telah membaca artikel saya....

Kalau nggak bisa Komen yo......