Wednesday, July 14, 2010

Home » » Cara Memasang Read More Button Pada Blog

Cara Memasang Read More Button Pada Blog

Share


Cara Memasang Read More Button Pada Blog

Memasang Read More Button sebenarnya dapat memudahkan pelawat memilih artikel yang mereka ingin baca sahaja selain dapat meringankan blog dan memaparkan komen yang telah ada pada posting tersebut. Korang boleh tengok contoh di sini.

 
Cara memasang Read More Button seperti berikut:

1. Masuk ke bahagian Dashboard > Template > Edit HTML > Proceed. Seperti biasa buat Backup dulu pada Template dan tick pada Expand Widget Templates.

2. Cari code  
</head> dengan cara tekan Ctrl+ F dan copy paste code </head> ke dalam kotak dan tekan Enter.

3. Copy code di bawah dan paste sebelum code 
</head> tadi.


<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

/*
*/

function removeHtmlTagundefinedstrx,chop){

ifundefinedstrx.indexOfundefined"<")!=-1)

{

var s = strx.splitundefined"<");

forundefinedvar i=0;i<s.length;i++){

ifundefineds[i].indexOfundefined">")!=-1){

s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}

}

strx = s.joinundefined"");

}

chop = undefinedchop < strx.length-1) ? chop : strx.length-2;

whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;

strx = strx.substringundefined0,chop-1);

return strx+'...';

}

function createSummaryAndThumbundefinedpID){

var div = document.getElementByIdundefinedpID);

var imgtag = "";

var img = div.getElementsByTagNameundefined"img");

var summ = summary_noimg;

ifundefinedimg.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>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>


4. Kemudian cari code 
<data:post.body/>

5. Copy code di bawah dan replace code 
<data:post.body/>


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumbundefined"summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://1.bp.blogspot.com/_LZtXSNcp76A/SxuOVTvCKgI/AAAAAAAAAr8/rFJNAYKSomY/s320/read+more_thumb%5B1%5D.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


6. Preview dulu. Jika tiada sebarang error muncul klik Save.

7. Selesai.

13 comments:

Apai S-tamarya said...

Xtau nak kta apa. sya dah ikut segala steps dgn tliti tp x bjaya tampilkan buttonRM... apapun, tq krn sd bkongsi ilmu.

SusuRaraYaya said...

apasal aku tak jumpa pon tu.. hmm xda kot

SeLEmbuT BAyU said...

;))

THIBBUL JAWI CENTRE said...

best website nih.. banyak kasik maklumat berharga..:X

cakedorayaki said...

tq2...

Zalina said...

head ? apa tuh ?

Are Qif said...

:-t terbaik!!!!

Mr Lee said...

tq banyak yg dpt saya pelajari dengan adanya tutorial seperti ini

zuar said...

tq semua yang sudi datang jengok n komen kt sini:-D

Eiyka_Resta said...

saya tak dapat edit html.tak jumpe pon
:(

madkie said...

dah try tp xjadi.huhuhu

Farah Fazylooney said...

haa .. tak fham .. haha

fazil flash said...

pSal x dpt ?

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Singgah je???Komen la sikit.:-D

Related Posts Plugin for WordPress, Blogger...

Artikel Sensasi

Blog Archive