Botón para agrandar o achicar el tamaño de letra del blog con jQuery

En un post anterior habíamos visto cómo agregar los botones para agrandar o achicar los textos usando un script muy sencillo. Hoy haremos algo similar, pero usando la librería jQuery, que le dará un efecto deslizante al momento de pasar de un tamaño de fuente a otro.

( ↪ Ver DEMO)

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahora lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente y de ser así podemos pasar al paso número 5.§ .

3.§ Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta </head>.

4.§ Encima de </head> pegaremos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.

<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'agrandar') {
finalNum *= 1.1;
}
else if (this.id == 'achicar'){
finalNum /=1.1;
}
else if (this.id == 'normal'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

6.§ Damos click a guardar.

7.§ Ahora, vamos a Diseño - Añadir un gadget y escogemos HTML/Javascript. En el nuevo elemento pegaremos el siguiente código:

<input id="agrandar" title="Agrandar texto" type="button" value="T+" />
<input id="normal" title="Texto normal" type="button" value="T" />
<input id="achicar" title="Achicar texto" type="button" value="T-" />

8.§ Damos clic a guardar.

PASO OPCIONAL

Este es un paso alternativo, para agregar estilo a los botones, como borde, cambiar el color del botón y de la fuente, etc.

1.§ Nuevamente vamos a Plantilla - Editar HTML. Damos un clic dentro del código de la plantilla, presionamos CTRL+F y buscaremos la etiqueta ]]></b:skin> y antes de éste, pegamos los siguientes estilos CSS:

#agrandar, #normal, #achicar{
width: 35px;
height: 35px;
color: #fff;
font-weight: bold;
background: #e2e2e2;
border: 2px solid #fc98bb;
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
cursor: pointer;
}

Podemos modificar los estilos a nuestro gusto o incluso separar un estilo distinto para cada botón.