Ampliar el texto de nuestro blog

Muchas veces nuestros lectores necesitan ampliar el texto de nuestro post para poder leerlo en condiciones.
Aunque todos sabemos que haciendo click en el teclado en Ctrl + Rueda del ratón podemos ampliar la pantalla.

Pero para no hacer esto vamos a mostrar como poner un código para que nuestros lectores lo hagan fácilmente .

Primero nos dirigimos a nuestra plantilla a  Tema- Edición Html 
Buscamos </head> y justo antes pegamos este 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/AVvXsEhklGJnWlhrk2R_jBe8_ipZnRL6wK90eUGCBZEQvfc35ZSui6j7bJNejDFpZdKm58OYXpUqGRO4s4YvAcgqi311DQQ81qFKzP-GsJaLk0hu1QX8EVcp_gRIz-xLMhz2YYCGF9hXCiG6vR4/) 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/AVvXsEheKGLJsTXry6eC9zIvqtNvD3m2Fj3bB8enfC60lPVjUdk_qDVmfEavLTq_e8Us7QJ26oxXFXhbonSjcXChXfMfTUadUc2uMTGHl-c8Jo_SMOTtZmhQqNa-J8Ggfr9wlYIlIiCxIpB5igs/s400/allblogtools-pin.png) no-repeat;
  width: 32px;
  height: 47px;
  margin:-35px 0 0 0;
  cursor: move;
  }
  div#fontSize {
  height: 40px;
  }
  </style>

La segunda parte buscamos este codigo con Ctrl+ F

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

y antes y depués del código anterior insertamos lo ue esta marcado 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 le damos a guardar plantilla.
La tercera parte nos vamos a Diseño> Añadir un Gadget y pegamos este 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>

Y ya lo tenemos

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso