How To Add jQuery Text/Font Size Resizer | Blogger Tips

1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Don't Click on "Expand Widget Templates"
3.Scroll down to where you see]]></b:skin> tag:
4.Copy below code and paste it just beforethe ]]></b:skin> tag.

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



5.Scroll down to where you see </head> tag:


6.Copy below code and paste it just before the </head> tag.

<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.Now Click on "Save Templates"


8.Now go to Layout-->page elements and Click on 'Add a Gadget'.


9.Now Select 'HTML/Javascript' and add the code given below and click 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>



Now you are done.

Comments Post a Comment

Anonymous - July 26, 2010

This ain't working at all .

Leave a Comment