cara membuat read more automatis dengan background

halo sobat blogger semua khususnya yang masih newbie. Malam hari ini saya akan share tentang " cara membuat read more automatis dengan background". langsung ke TKP aja ya. simak baik baik ya !

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>

summary_noimg = 500;

summary_img = 500;

img_thumb_height = 200;

img_thumb_width = 200;

</script>

//<![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  Lebar gambar...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 Sc-zone Saya ucapkan terima kasih telah membaca artikel saya....

Kalau nggak bisa Komen yo......

Jika anda mengalami kesulitan silahkan bertanya melalui komentar "Malu bertanya Sesat di jalan"

......::::::Selamat mencoba::::::......

Stay Connected With Free Updates