Cómo agrandar o reducir el texto usando Java

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Usando javascript para agrandar o encoger texto
Te voy a enseñar un truco muy sencillo y la verdad muy útil si crees que la letra de tu blog es pequeña o puede dificultar la lectura a tus visitantes.

Por medio de un gadget te enseñaré a añadir un "Menú de tamaños" que, al hacer click en cada botoncito, la letra se agrandará o se encojerá.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código:
<center><table border="1"><td><center><a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-red-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green.png"/></span></a></center></td></table></center>

El resultado será este:


Ahora simplemente escribe un título, por ejemplo: Tamaño de texto...


Finalmente guarda cambios.

Método de aplicación opcional:

Si quieres, puedes colocar este widget en el post-footer (pié del post)...

Diseño>edición HTML>expandir artilugios

1) Busca esta línea:
<div class='post-footer'>
2) Pégale esto justo debajo:
<left><a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-blue-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-24/16-square-red-add.png"/></span></a> <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span ><img src="http://www.iconlook.com/icondb/sweetie/png-8/16-square-green.png"/></span></a></left>
Haz vista previa para comprobar que tu blog carga bien.

Por último guarda cambios.

0 comentarios:

Publicar un comentario

¡Gracias por comentar!

Related Posts Plugin for WordPress, Blogger...