Font Re-Sizer Widget For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

Wondering if your blog's font are big , small or just right ? Just leave it on your visitors because this tool will give your visitors an option yo resize your blog's font as they want.

• Go To Blogger > Template > Edit HTML > Find </head> 

• Just above </head> paste following script :

<script src='http://widcraft.googlecode.com/svn/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/AVvXsEjN0I_yKmgHnWPUeZQlQvgP9kVgE8LamxXBHTVGEA0mJHXJwMrKLOtRBk1fnogy9y1Ch18VXPUoBF-V0yaWpBdeg_wNxUaldsMvkXRvMrNZN0Md2tUSgXi1_vnypgTro5nhARg6XLkHH8A/s1600/slider-bg.png) 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/AVvXsEjK3HZtUZFUhfopVT6AayLIAencoItRlumZkD3v9oWsSUJIzPBUSpWvDqvwU74yLuZWldAQz0-zEt4w0-RUNYFdjXF7TadVPS5CTGi0vv631g1aSabkzvG_tfZdGoYLN-nqPW2glQPk3ms/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

• Now search for : 

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

• Replace this with :

 <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>

•  Save your template....

• Now Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div id="myElement" class="slider"><div class="knob"></div><p style="font-size:10px; float:right; margin:3px;">Widget By <a href="http://www.widcraft.blogspot.com/" title="Blogger Widgets" target="_blank">Widget Craft</a> |
<a href="http://widcraft.blogspot.com/2012/09/font-re-sizer-widget-for-blogger.html" title="Font Re-Sizer Widget For Blogger" target="_blank">Get Yours ?</a></p>

• Click On 'Save'

That's it........Visit your blog and see it in action

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.