Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

joselop44 dice...

Como siempre, no decepcionas.
Saludos

Jaime Trujillo Escobedo dice...

La verdad es que es un truco interesante, sobre todo si estamos empezando con el blog ;-) es muy sencillo de aplicar :-D me alegra que te guste joselop44! :-)

Elisabeth dice...

genial gracias

besitosss

The Big dice...

Muy bueno ese tutorial bro te quedo bien y con lo del nombre del blog ya le puse el pupitre

Antony dice...

Que bien... Me gusta mucho... No lo he aplicado en mi blog por la sencilla razón de no encontrarlo muy bien explicado y no me convencían... Pero ahora si voy aplicarlo. Saludos!

Jaime Trujillo Escobedo dice...

Denada Elisabeth! :-D un abrazo0te :-)

Jaime Trujillo Escobedo dice...

Hola The Big!! me alegra que te gustase :-D que bueno0! aver cuándo me paso por el pupitre :-D intentaré que sea amenudo0 :-)

Jaime Trujillo Escobedo dice...

Hola Antony! cuánto tiempo! :-) me alegra que te haya gustado :-D de todas formas hay varias formas de poner este truquillo, esta es la más sencilla :-)

curiosomundoazul dice...

Hola Jaime te devuelvo la visita,aunque paso muy amenudo,gracias por tus post son de gran ayuda.De nuevo gracias.Un gran abrazo..!

Jaime Trujillo Escobedo dice...

Ho0la curiosomundoazul! :-D me alegra que te vayan gustando los posts :-D vienen algunos bastante interesantes :-D un abrazo0 amigo0 :-D

Lolami dice...

Hola Jaime: Sabes que me gusta probar las cosas antes de poner el comentario, pues lo he probado y es genial, gracias por estos truquitos y por tu blog en general, cuando puedas pasas y lo ves, nos leemos.
Un saludo

Birdelo dice...

Hola Jaime.

Super interesante. Ahora mísmo lo pongo en mis pruebas, a ver que tal me va.

Un abrazo cafetero ;).

Ryuivan dice...

muy buen truco jaime lo probe y se ve interesante como facilmente cambia el tamaño de la letra, saludos.

Jaime Trujillo Escobedo dice...

Lolami! cuánto me alegra que lo hayas puesto0 :-D me alegra mucho que te guste el Balcón :-D ahora me paso por tu blog :-)

Jaime Trujillo Escobedo dice...

Birdelo! que bien tenerte aquí! :-D la verdad es que es fácil de poner :-D y aunque hay varias formillas de ponerlo, esta estaba interesante y decidí explicarla :-D suerte con el truquillo :-D un abrazo0 compi :-D

Jaime Trujillo Escobedo dice...

Ryuivan! cuánto me alegra que te funcionase :-D la verdad es que es sencillo y su funcionamiento es fácil :-D

Maria Rosa dice...

Jaime:
Este truco me encantó!
pero no lo quiero al pie del post, (en el footer) porque tengo demasiadas cosas en los finales de mis post.
Quería dejarlo al lado de los botones del FCB y TW que los tengo ubicados, por la plantilla, del lado derecho de los post, arriba.
Asi que busqué esta línea en la plantilla:
div class='post-header-line-1'/ (no me acepta los signos el comentario)
Pero por mas que lo intenté y le cambié de left a right no hubo forma de ubicarlo a la derecha.
Desp, lo puse debajo de esta linea:
div class='post-body entry-content'
Es una hilera mas abajo. Y tampoco

Como hago para que me quede ¿? A la derecha de los post, arriba, pero no encima del título, sino donde tengo los otros dos botones, justo debajo de ellos.

Yo los ubiqué ahí en la plantilla, pero no hubo forma :S

Help !! Help !! :P

Jaime Trujillo Escobedo dice...

Maria Rosa, busca esta línea:

<div class="post-body entry-content">

Un poco más abajo encontrarás esto:

<div style="float: right; margin-left: 10px;">
<script type="text/javascript">

Pega el código justo antes de <script type="text/javascript">
y haz Vista previa.

Si todo sale bien guarda la plantilla ;).

Maria Rosa dice...

Quedó perfecto !!!!!
Maravilloso !!!!

GRACIAS JAIME ;)

Ahora si, tengo el botón en los dos sitios del blog, en el sidebar y donde yo quería en los post.

=D

Jaime Trujillo Escobedo dice...

Ya veo, Maria Rosa. ¡Te quedó muy bien! Como dices, ahora hay dos lugares en los que tus visitantes podrán cambiar el tamaño del texto.

Maria Rosa dice...

Jaime:

Recién, probando ambos botones, el del sidebar funciona perfecto, agranda y achica los textos, todos los textos.

El que está en el cuerpo del post no. No funciona.

fijate tu, a ver como es. A lo mejor con tu navegador si funciona.

Cualquier cosa, me indicas que hago, o elimino el de la plantilla.
¿Ok?

Besotes :) y gracias por tu ayuda.

Jaime Trujillo Escobedo dice...

Maria Rosa, me temo que al insertar el script dos veces en el blog éste deja de funcionar correctamente. Creo que por el momento deberás escoger un lugar para colocar el menú (próximamente publicaré otros trucos para agrandar y encoger el texto ;)).

¡Saludos!

ro.majada@gmail.com dice...

SOY NUEVA EN ESTO DE LOS BL0G.
CADA VEZ QUE INTENTO PEGAR ALGO EN LA URL DEL GADGET NUEVO ME DICE:LA URL CONTIENE CARACTERES NO PERMITIDOS Y NO ME DEJA PEGAR NADA.
EN ESPERA DE LA CONTESTACION.
UN SALUDO.

Jaime Trujillo Escobedo dice...

Ro.majada, quizás sea porque incluyes el código en el lugar equivocado. Mira esta imagen para comprobar si lo estás haciendo correctamente.

Silvia Beatriz Giordano© dice...

Hola Jaime: si andas un poco libre dime ¿por qué no se ve la imagen? intenté buscarla con la dirección que aparece en el scrip pero me manda a una página de enlaces. ¿puedo subir mis propios iconos y aplicarlos?.¿cuál iría en 1er lugar?
Gracias!!!

Jaime Trujillo Escobedo dice...

Hola Silvia!

Las imágenes no aparecen dado que el sitio web en el que estaban alojadas (Iconlook) ha hecho cambios.

Prueba a incluir tus propios iconos. En primer lugar iría el icono que agrandará el texto al máximo, es decir, el que al pulsarse mostrará el tamaño de fuente más alto.

El código sigue el mismo orden que la imagen del ejemplo por lo que cada URL o dirección de imagen representa a un icono (empezando por el lado izquierdo).

¡Suerte!

Silvia Beatriz Giordano© dice...

¡¡gRACIAS jAIME!!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo