Sunday, November 21, 2010

Tutorial nak buat button Read More

Alhamdulillah..baru sudah je melantak sepinggan nasik.Gara-gara tak breakfast (bangon pon tengahari..nak bekfest ape ney -,-)


Okeyla entri kali ney aku nak buat sikit tutorial atas permintaan cik mas yang mintak tolong ajarkan macam mane nak buat button read more macam ney..









Firstly korang kena  back up template dulu
Takutla karang tak jadi ke hape kan..beringat sebelum kene okey ^_^

Lepas tu pergi Dashboard >Design > Edit Html

Klik expand template widget


Cari kod ni </head>


Lepas tu paste kan code kat bawah ni sebelum code yang korang cari tadi




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


summary_noimg = 430; adalah size post tanpa gambar
summary_img = 340; adalah size post dengan gambar 
img_thumb_height = 100; adalah size tinggi gambar 
img_thumb_width = 120; adalah size lebar gambar



Lepas tu cari kode ney   <data:post.body/> 

Kalo dah jumpe buangkan code kat atas ney and gantikan dengan yang ini

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read More...</strong></a></p>
</b:if>

Kalau korang nak masukkan gambar macam aku punye tu korang cari dulu gambar yang korang suke kat  sini

Dah jumpe??

Next step tukarkan code yang kite amek tadi contohnye macam kat bawah ney 
http://i814.photobucket.com/albums/zz65/arzaqnie09/10-large-allblogtools.jpg
Jadikan code die macam ney

<img src="http://i814.photobucket.com/albums/zz65/arzaqnie09/10-large-allblogtools.jpg " border="0" alt="Photobucket" />

Korang kene edit code sampai jadi macam kat atas ney tau!!

Pastu gantikan code yang dah edit tadi kat perkataan Read More kat atas tadi..

Nanti die akan jadi macam ney


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style><p><data:post.body/></p><br />
<a href="'data:post.url'"><strong><img src="http://i814.photobucket.com/albums/zz65/arzaqnie09/10-large-allblogtools.jpg " border="0" alt="Photobucket" /></strong></a> <br />
</b:if> 



Okey siap..save template!!


nota kaki:kalo ade yang tak paham boley tinggalkan comment korang kat bawah ney okey ^_^


7 awesome comment's:

cik mas said...

code kotak kedua knape lain dgn kotak 1st??? x paham..kira ikot kotak ke 2 or yg 1st niyh??

♥NuR SyAFiQah♥ said...

macam ney..yg code kotak first tu untuk sape yg takde code read more..cube try cari ade tak code read more kt blog cik mas dulu..kalo takde ikut je step first tu..tapi yg tu takde icon lagi..kalo nak ade icon kene ikut step yg ke 2..

code kat kotak ke 2 separuh je sy ltk dari code yang kotak first tu..malas nk letak sume..hehe

faham x??

cik mas said...

kira mcm mane pon last skali mesti dpt kotak ke 2 tu la ye???

♥NuR SyAFiQah♥ said...

yup..sy dah edit balik coding kotak ke2 ney..try tengok..

Unknown said...

pqa.. kalo x nak letak gmba x pe ke? kira lepas step 2 terus save. boleh?

Mr. N said...

mcm xjd je =_="

Muhammad Dhamiri said...

dah jadi dah terima kasih ye... :)

Related Posts Plugin for WordPress, Blogger...