jQuery Powered Text / Font Resize Widget ΙΙ

Resize Widget uses a similar technique of Increase, Decrease, Reset Font size but displays in T+ , T , T- technique like most of the Wordpress Blogs use.
BACKUP YOUR TEMPLATE BEFORE YOU TRY THIS!

1.Blogger users Login to Dashboard > Layout > Edit HTML. Please Don't check "Expand Widget Templates" it will simplify your codes and will be easier.

2. Add resizeFont to your blog, the following code just before

]]></b:skin>

tag in Blogger Template.


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


Now Add jQuery.
As Always, add the jQuery part before the

</head>



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<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>

4. Final Step, configure the Widget
Save Your Template , Now go to Layout > Add a Gadget > HTML/JavaScript and paste the code below and Save.


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