Changing Blogger Font Size ( J-Query Widget )

Changing Blogger Posts font size is a cool widget. This widget will allows your reader to change the font size of your blogger posts as they want, bigger or smaller. This widget will change blogger post font size very fast. With the help of this widget your reader do not need to refresh page or do any thing else, they just drag a point to right or left and they get bigger or smaller text. So let's see how to add this widget to your blogger.

Note: Before you apply any changing to your blogger template, Download Full Template of your blog.

Now just follow these simple steps to add Widget.

Step 1.    Log in to your blogger account, click on drop down menu and then click on template.

Step 2. Click on Edit HTML

Step 3.  Find the following code

and before / above this code add the following code.

<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'/> <script type='text/javascript'> window.addEvent('domready', function(){var el = $('myElement'), font = $('fontSize');new Slider(el, el.getElement('.knob'), { steps: 35, // Tamaño máximo de la letra range: [8], // El 8 es el tamaño mínimo onChange: function(value){ font.setStyle('font-size', value); } }).set(font.getStyle('font-size').toInt());}); </script><style type='text/css'> div.slider { width: 97%; height: 26px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6Rcxwi7_gUOFDXwauRMa9MuqVI_rhOc-72aNjxyUYdM0NXh7V1E1hJdo1QpyzWulpYFeMNyPLtxezmez5nLlWIWyU5oI9RdrkEt4XP3nyuJ2nbvt_c-4WnVJI-e7Jj4t8mNMp-m4aCQ/s1600/Slider-bg.gif) 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/AVvXsEgfi054yrUM0sezoBTBu91wz-Ua6rfs1N9J2Yh-bVIQ2puByy51KA4DgGNAcbFeZYHpIgGX9DjN_JrfCLFGhH3Ry33Sf56HH4hEhbGFkkwZtjHAVTcXUb2C5KYzp5oF9rDvHiU1siMCO0s/s1600/iactips.blogspot.com-pin.png) no-repeat; width: 32px; height: 47px; margin:-35px 0 0 0; cursor: move; } div#fontSize { height: 40px; } </style>

Step 4.   At the same page try to find the following code or a similar one

And you'll have to add simple code before and after it, then it will look like following.

after adding these codes click on Save Template.

Step 5.   Now click on Layout tab, click on Add A Gadget and choose Html / Javascript .

And in the content area, paste the following 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.iactips.blogspot.com" title="Blogger Tricks" target="_blank">IAC Tips</a> | <a href="http://www.iactips.blogspot.com" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

And Click On "Save".
Now your widget is ready for your blog.

Drop Your Comments........
This Script is originally made by CiudadBlogger.com