Embed Text Resizing Widget To Increase or Decrease The Font Size

As you know, that some visitors prefer reading in small text size while others prefer larger, depending on their eye power, screen resolution, and monitor distance. So for those visitors, you can place a convenient widget to increase/decrease the font size easily.

Look the example below:

Change Text Size
+ + + + +


Or this one:

Change Text Size
Small
Medium
Large
Larger
Largest

If you want to use any of the abve widgets, use this code:
Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">+</span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">+</span></a>

And to use the second one, use this code:
Change Text Size<br/>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">Small</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">Medium</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">Large</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">Larger</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">Largest</span></a>

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

30 comments

Write comments
February 04, 2009 9:42 AM delete

where do i put this code if i want my readers to get the font resize option for each post??

Reply
avatar
February 04, 2009 9:58 AM delete

Add it anywhere, in the TEMPLATE.
Easier way is to add a sidebar-widget at the top, (which can be easily noticed by all the visitors)

Reply
avatar
February 13, 2009 5:02 PM delete

I tried this.. but it doesn't actually increase the size of the blog post text... only the widget headings..
??

Reply
avatar
February 14, 2009 3:44 AM delete

Hey aZoed,
You can try this widget in this post too, it does change the text in post....
The template you are using 'Cellar heat', is a much customized template, so I think there might be some code conflict !

Reply
avatar
February 22, 2009 10:01 AM delete

Thanks so much for this- works great!

Reply
avatar
March 13, 2009 12:47 PM delete

This doesn't work for blogger. Whenever I save my template, it automatically converts all the apostrophes around the line sizing to the html code (&apos;). Help?

Reply
avatar
March 13, 2009 1:56 PM delete

This blog itself is hosted with Blogger, and you can see that the code is working perfectly even in a blog post.
If you are facing any problem while using it in a blog post, try to add it to a HTML/JavaScript widget and place it somewhere easily visible to visitors !

Reply
avatar
March 13, 2009 10:11 PM delete

I have it set up in the template so it appears within all blog posts, yet it still doesn't work.

Reply
avatar
March 14, 2009 1:41 PM delete

Well, don't know if it will work or not, in your template, there'll be a code like this:

body {
...
....
...
font-size:12;
....
...
}


Change it to, this:

body {
...
....
...
font-size:100%;
....
...
}

Reply
avatar
June 24, 2009 1:30 PM delete

Thanks, it works great on all of my blogs, I have heavily edited/customized blogs, I just can't leave well enough alone ;) your widget worked perfectly for me.

Wretha

Reply
avatar
Su
August 12, 2009 4:20 PM delete

Thank you... worked great for me and I was having problems with the font showing up very very tiny on some people's browsers!

Reply
avatar
September 08, 2009 5:30 AM delete

Thanks a lot for this great widget. It worked fine in my sidebar, but I wish to put it above the title of my post. Can you please help me with this?

Thanks a lot in anticipation :)

Reply
avatar
September 08, 2009 8:16 AM delete

Hello Niharika,

Add the code (from the post above), immedately ABOVE/BEFORE this code in your blog's temaplate:

<h3 class='post-title entry-title'>

That's it !

Reply
avatar
September 08, 2009 9:17 AM delete

Thanks for your quick response Divya, but I had tried this earlier.. I found that the link does not function from there. However in the sidebar it is functioning very well !!
Therefore currently it is there only in my sidebar. Is it because I already have one widget over there ? I wanted to align both of them beautifully .

Reply
avatar
September 08, 2009 9:28 AM delete

Hmmm...in that case try pasting it just above
post.body tag

Reply
avatar
September 08, 2009 1:41 PM delete

Hey Divya, thanks a lot for your help :)

But it was still not working :(

Now I am using it on top right of the page !! I guess readers will easily see it. :)

Thanks and bye ...

Reply
avatar
September 17, 2009 1:21 PM delete

This works great on my website! Thanks so much--just what I was looking for!

Reply
avatar
September 26, 2009 1:06 AM delete

it was working on my previous template but on the present template Its not working on my site.First i pasted second code and checked it was not working then also.PLEASE CHECK IT OUT......

Reply
avatar
September 26, 2009 2:56 AM delete

Hi Inder,
not sure if it will work or not,

in your template, presently this code is there:

body {
margin: 0;
padding: 0;
background-color: #d9eaec;
background-image: url('http://1.bp.blogspot.com/_6pbSFKC8YH4/Sl6kkso-R_I/AAAAAAAABEc/gH20CXawFGI/s1600/bodybg.jpg');
background-repeat: repeat-x;
}


so modify it to this:

body {
margin: 0;
padding: 0;
background-color: #d9eaec;
background-image: url('http://1.bp.blogspot.com/_6pbSFKC8YH4/Sl6kkso-R_I/AAAAAAAABEc/gH20CXawFGI/s1600/bodybg.jpg');
background-repeat: repeat-x;
font-size: 100%;
}


tell me if it worked or not...

Reply
avatar
September 26, 2009 5:36 AM delete

No its not working sai .But thanks for trying bye...

Reply
avatar
September 26, 2009 6:07 AM delete

hmmm..okay
Instead of sidebar try the widget below post-titles

Reply
avatar
Anonymous
February 18, 2010 2:31 AM delete

this shows for increasing the size of entire body i want to increase the size for only paragraph tags in my page.anyone tell me how to do that

Reply
avatar
March 28, 2010 12:44 PM delete

Does this work in Wordpress too?

Reply
avatar
June 11, 2010 12:19 PM delete

Thank you so much! Worked for me! Just what I was looking for! ;;)

Reply
avatar
July 31, 2010 11:52 AM delete

thank you so much...
http://ipgktarkelabpengguna.blogspot.com

Reply
avatar
Anonymous
March 09, 2011 5:59 PM delete

Great stuff! It totally worked on my sidebar "Text" widget on my WordPress site. Thanks so much!!!

Reply
avatar
Anonymous
March 18, 2011 8:25 PM delete

Awesome, worked perfectly - THANKS!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon