Código para aumentar/ disminuir tamaño del texto

miércoles, 29 de julio de 2009
A+ / a-

Aquí os dejo un código que permitirá aumentar o disminuir el tamaño del texto del blog.

1. En Diseño> Edición de HTML de la plantilla, inserta lo siguiente antes de </body>

<script type='text/javascript'>
//<![CDATA[
var tgs = new Array( 'div','td','tr');
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
//]]>
</script>

2. Después en diseño, inserta un nuevo Elemento HTML con lo siguiente:

<a href="javascript:ts('body',1)">A+</a> <a href="javascript:ts('body',-1)">a-</a>

También puedes insertar imagenes si quieres:

<a href="javascript:ts('body',1)"><img src="URL DE LA IMAGEN DE AUMENTAR TAMAÑO"/></a><a href="javascript:ts('body',-1)"><img src="URL DE LA IMAGEN DE DISMINUIR TAMAÑO"/></a>
Puedes ver como queda con texto y con imágenes en el apartado Configuración de éste blog.
Saludos!!!

11 comentarios:

  • ¿De qué forma podríamos restringir el texto afectado?
    Digamos que sólo quiero que cambien de tamaño las fuentes que están en un div o un span o un id que se llame "texto", por ejemplo.
    Gracias por tu interesante post

  • La Trucoteca de Blogs

    Hola, "Anónimo" (la próxima vez intenta dejar tu nombre, por favor :D )
    Verás, tu pregunta es interesante, y tras probar unas cuantas cosas he dado con la solución.
    Es muy simple: lo que tienes que cambiar es el body (las 2 veces que sale, igualmente en las distintas opciones) de
    <a href="javascript:ts('body',2)">A+</a> <a href="javascript:ts('body',-1)">a-</a>
    El body lo que hace es afectar a todo el blog, y por ejemplo, si quieres que el efecto solo se aplique a un widget tienes que cambiarlo por el "id" de ese widget (ej: html12 o blogarchive1 , etc.)
    También si solo quieres que se pueda aumentar (o disminuir) el tamaño de únicamente las entradas del blog, debes de poner Blog1, y asi con cualquier widget o la sección del blog que quieras.
    Espero que te sirva la solución ☺. Cualquier problema nos lo comentas!
    Muchos saludos :D !!!!

  • Diseño Web

    No veo el ejemplo en tu blog, creo que esto de +A –a esta dejando de ser una moda, hoy apenas he visto sitios con esto. Creo que los webmáster le están dejan este asunto de la accesibilidad a los navegadores (con firefox Ctrl++ Aumenta el tamaño).

  • La Trucoteca de Blogs

    Diseño web.
    Puedes ver el ejemplo en el apartado configuración (habia un error en el enlace).
    De todas formas, aunque no sea imprescindible, es fácil de aplicar y es una "herramienta" bastante útil.
    No todos saben aumentarlo con esas teclas o con el ratón, y puede ser bueno para una mayor accesibilidad a una página web a personas con peor visión.
    Que lo quieras utilizar o no, tu verás :D.

  • Richard

    Hello!! amigo sin palabras mil gracias lo buscaba mucho.. DIOS te Bendiga

  • La Trucoteca

    Hola Richard!
    Nos alegra un montón que te haya servido y gustado el truco :)
    ¡Saludos!

  • Hola a todos y gracias por la información. Me gustaria poder parametrar las opciones para ampliar el texto. Es decir que solo haya 3 tamaños, normal, mas pequeño y más grande. He probado modificando los digitos pero no me sale bien (dos clic para bajar un tamaño, demasiada diferencia entre uno y otro, etc..) A ver si alguien me puede ayudar. Gracias.

  • La Trucoteca

    Pues, la verdad es que no sabemos si es posible o no, hemos estado buscando un ratillo por la red alguna alternativa parecida, pero no hemos encontrado nada... :(
    Si quieres, dejanos una dirección de tu página por si en los próximos días encontramos algo y te lo comunicamos :)
    Saludos!

  • Hola:

    Lo primero agradecer este código ya que parece que funciona correctamente y a más de uno le habrá sacado de apuros.

    Mi idea es poner en la web el aumento y la disminución del tamaño de la letra y una tercera opción que sea para reestablecer el tamaño de la letra. Mi pregunta es la siguiente: ¿Qué parámetro habría que poner en la llamada al javascript si quieres que el tamaño de la letra sea "normal" (el que se utiliza en la web sin darle a ninguno de los otros dos botones)? He probado con cero pero no funciona.

    Gracias por adelantado. Un saludo.

  • La Trucoteca

    Hola Rosa!
    Bienvenida al blog, nos alegra que todo te haya salido bien, pero, hemos de decirte que con este truco, lamentablemente no hay una opción para restaurar la letra a su tamaño original, tendrás que probar con diferentes métodos ;)

    ¡Saludos!

  • Hola, muchìsimas gracias por compartir el còdigo, llevo semanas buscándolo y me ha servido perfectamente. No sé si me puede ayudar con una consulta: resulta que tengo una tabla donde hay texto y no puedo hacer que lo que esté dentro, se amplíe o reduzca. Muchas gracias por su atención :-)

  • Ir Arriba