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.

Pullquotes o cajas de texto para notas en las entradas

En blogger podemos añadir múltiples cajas de texto, ya sea para destacar una parte del artículo o para anunciar cualquier cosa.

Hace tiempo aprendimos a insertar notas en el blog, seguidamente descubrimos la forma de conseguir una caja de texto con imagen de fondo personalizable, y en especial, una caja de texto con imagen de fondo al azar.

En esta entrada podrás descubrir la manera de incluir estas cajas de texto dentro de tus entradas, en un lateral, como puedes ver en esta imagen...




Para ello hacemos uso del siguiente código:

<p style="color: #464646; float: right; border: 1px solid #cccccc; text-align: center; padding: 4px; background-color: #ffffff; margin: 20px; width: 30%;"><br>ESCRIBE AQUI EL TEXTO<br><br></p>

En el que puedes editar:

1) El color del texto, reemplazando #464646 por el valor hexadecimal de tu color favorito (entra en la tabla de colores).

2) La posición del pullquote, reemplazando float: right; (lo que situará el recuadro a la derecha de la entrada) por float: left;.

3) El grosor (1px), el estilo (solid) [+] y el color (#cccccc) del borde [+], en la línea border: 1px solid #cccccc;.

4) La alineación del texo, editando text-align: center; (centrado) por text-align: left; (alineación a la izquierda) o text-align: right; (alineación a la derecha).

5) El color de fondo (blanco), sustituyendo #ffffff en background-color: #ffffff; por el valor hexadecimal de tu color favorito (entra en la tabla de colores).

Si prefieres añadir una imagen de fondo, utiliza esta otra línea:

background: transparent url(URL DE TU IMAGEN) repeat scroll 0 0;

Reemplazando URL DE TU IMAGEN por la dirección de la imagen.

6) El tamaño del texto, agregando la línea font-size: 12px; al código, por ejemplo antes de color: #464646;.

Te en cuenta que el código lo debes pegar en el cuerpo de la entrada, encima o debajo del párrafo / frase que desees complementar (ya que la casilla se visualizará a su derecha o a su izquierda).

Nota:

Para no tener que estar copiando el código que inserta el pullquote en las entradas, haz uso de la plantilla de entrada ofrecida por blogger.

Susana dice...

Hola, soy una asidua lectora de tu blog aunque nunca he comentado nada en él. Hoy me he decidido a felicitarte por tu labor. Con tus explicaciones tan sencillas pero a la vez tan detalladas hacen que sea muy facil ponerlas en practica. Enhorabuena por tu blog.

Susana dice...

Hola, nunca he comentado nada en tu blog, pero hoy me he decidido a hacerlo. Tu forma de explicar es muy gratificante a la hora de leerlo. Tan sencillo pero tan completo a la vez que hace que sea muy fácil pornerlo en práctica. Enhorabuena por tu blog. Tus ideas siempre ayudan a novatas como yo. Gracias.

Jaime Trujillo Escobedo dice...

Hola Zayas! Muchísimas gracias por haber comentado y mucho más por lo que has escrito. Resulta muy agradable saber que la forma en la que explico las cosas os ayuda a entender el mundo del blogger ;).

En cuanto necesites ayuda o tengas cualquier duda, deja un comentario para hacérmelo saber ^^.

Laube Leal dice...

Muyyyyyyyyyyyy interesante, Jaime... Como siempre guapetón!!!!!!!!!

Jaime Trujillo Escobedo dice...

Gracias Laube ;), No sabes las ganas que tengo de volver a estar con tod@s vosotr@s como antes... Pero supongo que los estudios es lo que tiene (¡por suerte cada vez queda menos!).

¡Abrazos!

Laube Leal dice...

Venga, venga... A estudiar, a estudiar para ser una persona de provecho, sobre todo para ti mismo.
Tod@s hemos pasado por ahí, Jaime (yo soy Licenciada en Derecho y me pegué un buen tute, la verdad...), así que no aflojes, que de esto se sale. Te lo digo yo...
Un besote y ánimooooooooo

Fuentecillas dice...

¡¡ Mola¡¡ Cada día te superas

Jaime Trujillo Escobedo dice...

¡Por supuesto, Laube! Intentaré no aflojar para nada (aunque únicamente sea por no tener que volver a estudiar desde cero ;)).

Abrazos y gracias ^^.

Jaime Trujillo Escobedo dice...

¡Muchas gracias, Fuentecillas!

Montse dice...

Hola Jaime, vengo a darte las gracias por este post de "cajas de texto", acabo de añadirla a una entrada para escribir una rectificación y me ha ido fantástica, gracias a tus expliaciones.

Leo todo lo que publicas y aunque no te deje un comentario estoy siguiendolo todo. Leí este post y me pareció muy interesante.
Mira tú, por aquellas casualidades de la vida, ahora me ha hecho falta y me he venido directamente a buscar tus "cajitas".
Todo resulta la mar de sencillo siguiendo tus instrucciones ¡incluso la paleta de colores que tienes en un link me ha ido bien, es fantástico!

Jaime, eres estupendo y, repito, muchas gracias por ayudar y hacerlo todo tan sencillo.
Un beso muy grande.

Jhony dice...

Lo maximo Jaime, muy util este artilugio ;) ..... Slaudos y gracias de nuevo

Jaime Trujillo Escobedo dice...

¡Bienvenida seas, Montse! No sabes lo orgulloso que estoy de haberte podido ayudar y al igual, de haber recibido estas palabras tan bonitas.

La tabla de colores... si yo te contara los problemas que me dió durante su creación, buff ;) Pero ahora es una herramienta fantástica.

Cada uno de tus comentarios son agradables de leer. Recuerda que desde que necesites ayuda en algo puedes contar conmigo.

¡Abrazotes amiga!

Jaime Trujillo Escobedo dice...

Gracias a ti por comentar, jhonylarico ^^.

Anónimo dice...

¡Gracias por el tutorial! Me ha servido muchísimo <3

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