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 ^_^