Saturday, June 11, 2011

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:
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>

If you want you can add this by HTML/JAVASCRIPT
or If you Want to appear this in the post than
Goto Layout > Edit HTML
And check Expand Widget Box
and search for <data:post.body/>
Then If you want it to appear on the top paste the code above <data:post.body/>
If you want it to appear on the bottom paste the code down the <data:post.body/>
And At Last Save It Over Enjoy !

2 comments:

  1. I am trying to ad this to my website and i cant seem to be able o put it on the top right corner as its outside the template.. i seem to be able to put it witin the template though? any help?

    ReplyDelete
  2. vai ami cyber caffe.apnar somasshata ami pore solve korar cesta korbo.

    Thanks for keeping visiting us

    ReplyDelete