Blogger Front size control widget

Friends now MBC got a new trick that how to readers are control your blogger front size. MBC created a widget you can use this gadget to give your blog to professional readers look. Friends now a days all websites are interested to giving best way to readers can read then why blogger not giving this feature. I am specially recommended this feature to all bloggers use this gadget all give your blog to a new look. Now star learn how to add the widget.

Friends this widget most helping your blog readers to set her front size that her choice. Then what's let to adding start learn how to adding in your blog.

Add the Blogger front size control widget

Step-1

Go To Blogger > Design > Edit HTML > Expand Widgets Templates

Backup your template

Then search the below code using Ctrl + F

</head>

paste the below code just before it.

<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(http://2.bp.blogspot.com/-E9rVecEft8w/TxT7n3H0NrI/AAAAAAAAAtY/FtRz4tC6NrI/s320/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(http://2.bp.blogspot.com/-7YfY2kEyysY/TxT8JCPLYJI/AAAAAAAAAto/LJ-4Mw8LBNg/s320/i.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

Then find below code using Ctrl + F

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

paste the below code just before it.

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

Save Template

Step-2

Go To Blogger > Design > Page Elements

Add a gadget > select a HTML/JvaScript gadget

Paste the following code in the box.

<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.mybloggerclub.com/" title="My Blogger Club" target="_blank">MyBloggerClub</a> | 
<a href="http://www.mybloggerclub.com/2012/01/blogger-front-size-control-widget.html" title="Blogger Font Control Widget." target="_blank">Get Yours ?</a></p>

Click save

Save Template

Visit your blog and enjoy with new gadget.