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:
+ + + + +
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>
11 comments:
where do i put this code if i want my readers to get the font resize option for each post??
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)
I tried this.. but it doesn't actually increase the size of the blog post text... only the widget headings..
??
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 !
Thanks so much for this- works great!
hello
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 ('). Help?
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 !
I have it set up in the template so it appears within all blog posts, yet it still doesn't work.
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%;
....
...
}
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
Allowed HTML tags: <b>, <i> and <a>