El lector personaliza el tamaño de la fuente de mi blog

Todo tenemos el derecho de leer los posts (artículos) en el tamaño de la fuente que más nos sea cómodo. En el siguiente tutorial os explico, como ofrecer a nuestros lectores una herramienta con la que ellos podrán cambiar el tamaño del texto de vuestro blog. Sin tener que hacer malavares.

1. Nos dirijimos a Diseño > Edición de HTML y buscamos el siguiente código
   

   </head>

Y justo antes, añadimos el siguiente código:

<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/AVvXsEjGq-aj5qBkczFx1RhgsaE7XUUyJRGiVf-zFAjbGFe4Ha87duyoqU9Ks0GCj_Pl5_JSSRag2E_21pF0UJiJROZBeTer-krrB7eSbwQCQCkxJoOctujA2KRXi8bceVT7VEiFcUMrG4ZciIg/) 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/AVvXsEhimnKx5CBFgny9hm7REMScxj94IWu-yK2WAjZHZLFfefEvnBny5q-8VFT7H9dcOs6lhB7CTE5I9irR0hIIofmD2EbHqdJLhlEp2SXpOOBCRjXOg5uAIR-cK_Qghhk-mCobw3BPZVViSrU/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

A continuación buscamos el siguiente código:

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

Y antes y después del código agregamos lo que está en azul:

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

• Para terminar la primera parte, clic en GUARDAR PLANTILLA y seguimos:
  

1.  Nos dirijimos a Diseño > y agregamos un nuevo Gadget exactamente HTML/Javascript. En la zona donde más nos guste.

Y para acabar con el tutorial, en ese Gadget nuevo insertamos el siguiente código:

<div id="myElement" class="slider"><div class="knob"></div><p style="font-size:7px; float:right; margin:3px;">Widget de <a href="http://bloggercodigo.blogspot.com/" title="Blogger Templates" target="_blank">BloggerCódigo</a> |
<a href="http://bloggercodigo.blogspot.com/" title="Blogger Codigo." target="_blank"> Recursos Blog</a></p></div>

• Para terminar, clic en GUARDAR PLANTILLA.
  
  Comentar es agradecer, amigo.