jQuery Powered Text / Font Resize Widget
Text resizer, or Font resizer comes handy when dealing with readers who browser in different browser resolutions. It gives them the power to choose the way they read the blog. Last week Anil (A web designer buddy) had few clients requesting for a similar plugin, because as you know smaller text is fun to read by not everyone likes it. Especially older people (in age) find it annoying to read small text. In that case this jQuery script which allows you to resize text/font on your blogger blog. It can be used universally on other websites since its runs on jQuery code.
There are 2 ways to add this jQuery plugin to your blog sidebar. Choose anyone which suits your blog better. DEMO of this widget on the Sidebar.
jQuery Powered Text / Font Resize Widget STYLE#1
1. Add jQuery.
You can skip this step if your blog already runs the jQuery Script. If not you can paste this above </head> tag of your blog/website.
BACKUP YOUR TEMPLATE BEFORE YOU TRY THIS!
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
2. Add The Resize Widget.
Blogger Users: Add an HTML/JavaScript Widget on your blog and paste the code, save it
<style>
html {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
.post-body {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('.post-body').css('font-size');
$(".resetFont").click(function(){
$('.post-body').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('.post-body').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('.post-body').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('.post-body').css('font-size', newFontSize);
return false;
});
});
</script>
<div id="sidebar-right2"><div id="sidebar1"><ul>
<li><a href="#" class="increaseFont">Increase</a></li>
<li><a href="#" class="decreaseFont">Decrease</a></li>
<li><a href="#" class="resetFont">Reset</a></li>
</ul>
</div></div>
3.Customising the Widget.
Now the Widget is ready, but to make the Reset function of this widget work you will have to copy your template .post-body class and replace it with the code highlighted below. Please Note this is necessary if you want the reset the values to your template default codes.
.post-body {
font-size:13px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
jQuery Powered Text / Font Resize Widget STYLE#2
This Style #2 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;
}
3. Now Add jQuery.
As Always, add the jQuery part 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(){
$('input').click(function(){
var ourText = $('#content-wrapper');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.1;
}
else if (this.id == 'small'){
finalNum /=1.1;
}
else if (this.id == 'reset'){
finalNum =13;
}
ourText.animate({fontSize: finalNum stringEnding},500);
});
});
</script>
</div>
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 class="codeview">
<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>
Cheth is the founder and Brainchild of Chethstudios. Design Guy, Blogger, Social Media junkie, Chief Troublemaker at Cheth Studios and also a Part time Design (Nerd). Altogether nice guy! Follow the Cheth on Twitter for updates, design, web development.
Hey! Do you want to miss out any posts? If not get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email
7 COMMENTS:
Nice tutorial Cheth! Saw the demo it was awesome! :)
Sharing this page with my team for future usage.
Thanks, J
Awesome post buddy. Its a great plugin
Dear I don't understand your scripts. I upload in my blog with HTML but its not working proplerly
Nice.
I also tried to implement 'Font Resize' - jQuery (another version), in here
http://deconstructioncode.blogspot.com/2009/07/resize-fonttext-jquery-blogger-template.html
Great, I would try this on my new theme design for Wordpress. Thanks for sharing
Thank you!
Using it at blog. Needed this one
GBU
Arti
Post a Comment
Please Don't Spam that's all. Grab our RSS Feed and we would Love to see you in our comments section more often.