Increase or Decrease Your Font Size On Blogger Dynamically - The Text Resizing Widget

resize-fonts
I've been constantly trying to provide unique articles for blogger/blogspot blogs. With the same motto in mind, I've got yet another interesting trick today wherein you can re-size (both increase or decrease) the size of your texts dynamically. I suggest you to take a look at the live demo using the link below to better understand about the same.

DYNAMICALLY RE-SIZE THE FONTS ON BLOGGER - LIVE DEMO

I guess you understood what do I mean changing layouts dynamically.Wondering, why should I use this? Pretty simple! Your blog shall be read by people from various age groups. Few might feel it comfortable to read the articles on your existing font/text size while few may find it difficult - especially the old age group. Hence, you shall add few lines of a JavaScript to satisfy every reader on your blog, by providing him/her the ability to customize the visual appearance of your blog. Interesting... Isn't it?

FOR NEWBIES - ONE CLICK INSTALLATION
Warning: The one click installation button works only on Opera, Firefox 3.0+ and IE 9.0! So, if you are using any other browser, then please skip this method and scroll down to install the widget using the alternate method - the one explained for web masters.

Without wasting your time, let me dive into the tutorial. I've created a simple one click installation button, as shown below, by which a widget shall be added to your blog so as to change the font size dynamically. It's specially targeted to newbies and those who hate playing with codes, unlike me! 


On installing the widget, you will notice the following text - CONTENT GOES HERE, appearing on your blog. Just replace CONTENT GOES HERE with the content of your choice and your done! You should be able to make your text bigger or smaller by clicking the respective links mentioned in the widget.

Note: By opting for this method, you will be able to increase or decrease the text that lies in the widget - those lines which you replaced with CONTENT GOES HERE. In other words, the content between the div id and div.

FOR WEBMASTERS - A LITTLE COMPLEX PROCEDURE
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over,  expand your blogger template and search for the following piece of code. Use CTRL+F to speed up the search.
<div class='post-body entry-content' >
2. Just add id='wrap-content' along with the div tag mentioned at step 1, that is, next to class='post-body entry-content'. So, your final tag should be similar to the one shown below.
<div class='post-body entry-content' id='wrap-content'>
3. Save your template and move to the "Design >> Page Elements" page.
4. Choose "Add a Gadget >> HTML/JavaScript". Now, paste the following codes in the text document  - TEXT RESIZING SCRIPT, in the window that pops up (fill the content part - not the title). You may add a title to the widget or you may leave it blank - the choice is yours.
5. Well, that's it! Save your widget and your done!

Note: By following the complex procedure, the font size of your articles, be it the one on the homepage or the post page, will increase or decrease unlike the ones using the widget version. To understand the difference, try both the methods:)

The biggest advantage with this script is that, it works independently and does not require a jquery library file, unlike the other tutorials on dynamically changing layouts on blogger - Changing Backgrounds and Adaptable View. Just few lines of script will do the magic. Tested to work on all major browsers. Compatible with all the blogger templates - be it the customized ones (or) the default blogger themes.

Well, I would like to know whether you enjoyed the one click installation tool in this tutorial or not? I'll probably try to use them more often than not in the upcoming articles so that, even the newbies can enjoy the various effects posted on my blog. Anyways, share your opinions about the article via comments! We love to hear from you:)

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Widgets
bhumika said on September 16, 2011 at 12:44 AM :

thats very nice..have you not installed it ?

REPLY
Mukund said on September 16, 2011 at 11:44 AM :

@bhumika: Just searching for a spot to add one! I don't want to make my subscribe box go below the screen and the advertisements too:)

REPLY
M.Pinto @ ProHacker said on September 16, 2011 at 7:58 PM :

Whoa.. This is a good one.
Maybe, I'll add one NOWWWW!! :)

You've been giving us awesome tutorials. Thanks Mukund!!

REPLY
Analyst said on September 16, 2011 at 10:52 PM :

Mukund, Must say it is an awesome script if it does not increase the loading time for the site. Keep it up.

REPLY
Mukund said on September 16, 2011 at 11:19 PM :

@M.Pinto @ ProHacker: Yup! I've been trying to provide unique stuffs! Thanks for the comment buddy! I hope you enjoy the upcoming articles/tutorials too:)

REPLY
Mukund said on September 16, 2011 at 11:22 PM :

@Analyst: Well, it will definitely not increase the load time in anyway! It does not work on jquery! So, you can install it Mr.Analyst:)

REPLY
Analyst said on September 19, 2011 at 12:20 AM :

I have installed the widget at http://www.indian-share-tips.com/ and results are just awesome. Thanks for great stuff.

REPLY
Mukund said on September 19, 2011 at 1:34 AM :

@Analyst: Yup! Had a look at the same! I hope, I'll be able to provide similar widgets so as to keep you excited always:)

REPLY
Rajib Kumar said on September 24, 2011 at 12:20 AM :

Hey, really nice widget. I will install it in my personal blog.

REPLY
Mukund said on September 24, 2011 at 11:38 PM :

@Rajib Kumar: Yup! Thanks Rajib! I hope you enjoy the other widgets - upcoming ones as well!

REPLY
skyafar said on October 8, 2011 at 4:14 PM :

Nice post.. I think it should help for my new blog.

REPLY
Mukund said on October 10, 2011 at 1:54 AM :

@skyafar: Hope it does! Thanks for the comment! Hope you enjoy the other articles as well!

REPLY
Sell Ads said on October 11, 2011 at 3:19 AM :

I must say that this blog is an amazing blog an impressive one,,Thanks for the tutorial, very interesting

REPLY
ips.jolly said on January 24, 2012 at 12:35 PM :

ITS OSM !!!

But i want to resize Images ???

PlZ give script for that

Thanks :>

Waiting....

REPLY

Use the tab below to comment. No spam please!!!

[netinsert=0.0.1.11.14.1]