Text/Font Resizer Widget for Blogger

Along time i'm not write in my blog, now I wanna post about how to make text resizer or font resizer widget for blogger. Text resizer comes handy when dealing with readers who browse in different browser resolutions. It gives them the power to choose the way they read the blog. This tutorial is very good for your blog visitors, if there are visitors who have a problem with "minus eye" or older people "in age" ( I also including in who have a problem with "minus eye" but not in older people B-) :-j ) they can resize your post. Well, if you interested to put it in your blog please follow these steps:

There are 2 ways to add this widget in your blog, choose one of them which suits your blog better.

#First Way: Font Resizer For All Element (Body Element)

1. Sign in to your blog.

2. Go to tab Layout -> Edit HTML

3. Backup your template by clicking Download Full Template.

4. Check the box labeled Expand Widget Templates.

5. Look for this code:

</head>

6. Then, Install this script code just ABOVE that code:

<script src='http://roele112.googlepages.com/textsizer.js' type='text/javascript'/>

7. Next Save template.

8. Final step is where put this widget, usually i put it in sidebar element. Go to Page Element choose HTML/JavaScript and add this code below:

<center><a href="javascript:ts('body',1)">T+</a> | <a
href="javascript:ts('body',-1)">T-</a></center>

and see the result. Congrats..!!!
====================================

#2nd Way: Just for Post Element, not another like sidebar

1. Same steps like above, until no.4

2. Search this code:

]]></b:skin>

3. Next add this code below just ABOVE that code:

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

4. Now add this script below just ABOVE </head> code:
if you have added jQuery script just delete this code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

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

<!-- Start ResizeFont | http://www.kanwara.com/ -->
<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>

5. Final step Save Your Template, then where put this widget, usually i put it in sidebar element.
Go to Page Element choose HTML/JavaScript and add this code below:

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

and see the result. Congrats..!!!

some of script taken from Dynamic Drive

You can also read in Indonesian Language Here