Change font size in blogger post

As a blogger, I know that various readers with a different screen sizes and habits are reading my site, So the font size should suitable every single reader, no matter his screen size, or his favorite size,
Today I’m presenting one of the most widgets I’ve ever customized for blogger.
I enjoyed making it, and i think you’ll enjoy using it, This widget will allows your readers to change the font size of your blogger posts as they want, bigger or smaller, in an easy,simple and fast way without refreshing the page or any thing using the j-query. So let’s see how to Add it.

Warning : Before you start applying any changes to your blogger template code, We encourage you to Backup it, by clicking on Download Full Template link.

1. Adding The CSS And Java.

After Being logged in to your blogger account, Please go to ( Dashboard >> Design >> Edit Html ) 
and find the following code,

</head>

Exactly before it, Add the following code,

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/>
  <script type='text/javascript'>
  window.addEvent(&#39;domready&#39;, function(){

var el = $(&#39;myElement&#39;),
  font = $(&#39;fontSize&#39;);

new Slider(el, el.getElement(&#39;.knob&#39;), {
  steps: 35, // Tamaño máximo de la letra
  range: [8], // El 8 es el tamaño mínimo
  onChange: function(value){
  font.setStyle(&#39;font-size&#39;, value);
  }
  }).set(font.getStyle(&#39;font-size&#39;).toInt());

});
  </script>

<style type='text/css'>
  div.slider {
  width: 97%; 
  height: 26px;  
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnR9xYYpMAy1RDcp7uGo3LyEnqv235FO3_WcSeQNTjlejwnk4MdRds-ddOg7HV5SyaUGIx4lO1hSopPBQwTya_MlBpdWpGAO3Sn6jHoERSax2ZL6rOG4eYeBHoyjIBpy7Ol4lWdR2bno/) no-repeat right top;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #708B95;
  margin-top:40px;
  }
  div.slider div.knob {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVD6OACmYNeGDDsmTXpI0jiW2xsfIWSDuTyOy-99f0SwejWUc7IGvrli0zJCQ82eOTFINxf5fMLH5Az-vcPEChnyW0a9odsJMTOv3cT2OxF0g3ncphASVCg24qTg9u-UdjE6Zstj7MfDk/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

And move to the next step.

2. Add the Widget Code To The Posts Area.

At the same page in step 1, Try to find the following code or a similar one to it,

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

And you’ll have to add simple code before and after it, So it will be like the following,

<span id='fontSize'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</span>

So All you have to do in this step is to add only the blue lines before and after the code.
Now click Save Template and go to step 3.

3. Adding The Widget For Your Template.

The great thing about this widget is that it fits any blogger template, and you can put it any where on your blog,
All you have to do is to go to, ( Dashboard >> Design ) 
And any where, click Add A Gadget button, and choose ( Javascript / Html )
and in the content area, paste the next code,

<div id="myElement" class="slider"><div class="knob">/div></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.allblogtools.com/" title="Blogger Templates" target="_blank">AllBlogTools.com</a> | 
<a href="http://www.allblogtools.com/tricks-and-hacks/blogger-font-size-control-changing-j-query-widget/" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click Save
Now your widget is ready on your blog and you can test it.