Cambiar el tamaño de la letra con una barra de desplazamiento

Ya antes vimos dos opciones para cambiar el tamaño de la letra del blog, en cualquiera de los dos se tiene que hacer click en un tamaño para que se aplique la medida de la fuente. En esta opción el cambio del tamaño es gradual y es usando MooTools, una librería Javascript de efectos.

Puedes ver un ejemplo en este blog de pruebas, en la sidebar verás una barra, usa el selector para cambiar el tamaño de la letra, desplazalo hacia la derecha para agrandar el tamaño, y hacia la izquierda para hacerla más pequeña.

Antes de pensar en ponerlo considera que MooTools al igual que otras librerías no es compatible con otros scripts, así que si usas Scriptaculous o jQuery seguramente no funcionará.

Ahora sí, entra en Diseño > Edición de HTML y SIN expandir los artilugios pega antes de </head> lo siguiente:

<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: 220px; /* ancho de la barra */
height: 16px; /* alto de la barra */
background: #eee; /* color de la barra */
}
div.slider div.knob {
background: #0080FF; /* color del selector */
width: 16px; /* ancho del selector */
height: 16px; /* alto del selector */
cursor: move;
}
div#fontSize {
height: 40px;
}
</style>

Luego busca esta parte y agrega lo que está en color rojo:

<div id='fontSize'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
</div>

Por último entra en Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega esto:

<div id="myElement" class="slider">
<div class="knob"></div>
</div>
<p>Mueve la barra hacia los lados para cambiar el tamaño de la letra.</p>

Con eso el tamaño de la letra de las entradas cambiará desplazando el selector de la barra de un lado a otro. Si deseas que también cambie el tamaño de la letra de todo el blog entonces la primera línea en color rojo deberá ir antes de <div id='content-wrapper'> y la otra parte roja antes de <!-- end content-wrapper -->

Puedes cambiar el aspecto de la barra y el selector modificando lo que se indica en color verde.

Sin duda es un método muy elegante para cambiar el tamaño de la letra del blog que el lector agradecerá.