Label Cloud

Search This Blog

10 May 2010

online counter Text / Font Zoom In And Out

Assamualaikum , Msue nak kongsi lagi ngan korang sume bagaimana nak buat text/font leh Zoom In dan Zoom Out DEMO





1. Login ke Blogspot .

2. Klik Layout - Edit HTML (Tandakan pada kotak Expand widget )

3.Cari kod dibawah(gunakan CTRL + F untuk memudahkan korang mencarinya)



]]></b:skin>



4. Copy kod dibawah dan pastekan diatasnya .



/* resizeFont
*/
#resizeFont{
text-align:right;
margin-right:10px;
}


5. Cari kod dibawah


</head>


6. . Copy kod dibawah dan pastekan diatasnya .


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#content-wrapper&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>


7. Preview dan Save template jika tiada error .


Cara Untuk Memasukan Disidebar

1. Klik Layout - Add a Gadget Javascript / HTML


2. Copy kod di bawah


<div id='resizeFont'>
<input id='large' type='button' value='A+'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>


4. Pastekan kedalamnya

5. Save dan Preview
Tinggalkan Komen Anda Disini