Increase and Decrease Font Size Widget For Blogger

Introduction

This plugin uses a very simple Jquery in order to Increase and Decrease the font size of a text. This widget is useful for both you and your users especially those with poor eyesight. This widget is very essential if you want to maintain your blog's font small and at the same time turn them into big for your users.

External Scripts

Jquery Library vX.X.X or higher ?

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
 Copy the following code and paste it before <div class='post-header-line-1'>
or anywhere you'd like it to add.

<a href="#A+" id="increase">A+</a>
<a href="#A-" id="decrease">A-</a>

CSS

No CSS required.

JScript

 Find (ctrl+f) </body>
 Copy the following code and paste it before </body>

<script type="text/javascript">
  $(document).ready(function() { 
  $('#increase').click(function(){    
        curSize= parseInt($('.post').css('font-size')) + 2;
  if(curSize<=20)
        $('.post').css('font-size', curSize);
        });  
  $('#decrease').click(function(){    
        curSize= parseInt($('.post').css('font-size')) - 2;
  if(curSize>=12)
        $('.post').css('font-size', curSize);
        }); 
 });
</script>

 Save your Template

Final Words

As the user clicks on the links, font size will increase or decrease by 2 units dynamically. Remember that we have set the highest limit to 20px and lowest limit to 12px for the text content. To change this just replace the following lines with your desired font sizes.

For the largest font limit, just change this line curSize<=20
Change this line for the smallest font limit curSize>=12

Let me know if you're facing any problems installing this plugin. Enjoy blogging!