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>

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 !