Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

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 !

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • Email

Related

March 19, 2009 Ritesh Sanap Blogger Tutorials, Solutions Blogger Hacks, Cool things, Hacks

Post navigation

Previous Previous post: ASCII Text Generator
Next Next post: Add Your Sign Below All Posts In Blogger / BlogSpot Blogs

Currently Trending

  • How to download Specific parts of YouTube videos
  • h4x0r ( Hacker ) - Blogger Template
  • How to Change the Welcome/Login Screen in Windows XP ?
  • Highlight Author Comment in Blogspot
  • How to Increase Dropbox upload speed
  • How To Change Windows XP Shutdown Dialog Box
  • Windows Vista CD key
  • Advanced What should we Write about next? - WordPress Plugin
  • A Great Magic Trick With Google - Fool your Friends

Random Posts

Google 2-Step Verification

May 2, 2011 By Ritesh Sanap 5 Comments

Top 5 free online Gaming Sites

January 16, 2014 By Ritesh Sanap Leave a Comment

Hacking DSL Router

January 16, 2008 By Ritesh Sanap Leave a Comment

SkipScreen:Download From Rapid Share,Mega upload,Media Fire or Any Hosting SiteWith Out Waiting For Seconds (Download In Single Click)

May 16, 2010 By Ritesh Sanap Leave a Comment

Get Free Ubuntu CD Desktop and Edition Server Edition

August 8, 2008 By Ritesh Sanap 2 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2022 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.