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:
5.§ Ahora agregaremos el siguiente script debajo de la librería jQuery que agregamos en el paso anterior.
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:
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.
Cada vez que implementamos un nuevo menú, galería,lista de enlaces, etc. a nuestro blog lo acompañamos con una hoja de estilos, el CSS, el que podemos definir a nuestro gusto cambiando colores, bordes, márgenes, fondo...Sin embargo, hay quienes no entienden muy bien las propiedades de la hoja para poder cambiarlos a su gusto. Es por ello que vamos a empezar a ver las diferentes propiedades CSS, indicando que valores se puede usar para cada uno y así sentirnos más cómodos al momento de personalizar nuestro CSS.
En futuros post veremos más formas de personalizar nuestro Blockquote.