¡Bloque para tu blog lindo!

BLOQUE LINDO
¿Quieren conseguir esto? ¡Pues es muy sencillo! Esta es la prueba de cómo les quedaría en vuestro blog sin editar, así que si no les gusta la combinación de colores, tan solo cámbienlos para ajustarlos a su blog.
¡Hola! Hoy os vengo aquí a enseñar un pequeño tutorial —mi primer tutorial— sobre una cajita donde podréis poner información. Pueden ser desde blockquotes hasta avisos de algo, eso ya es cosa de vuestra imaginación y de lo que necesitéis. 

El caso es que no es demasiado complicado, aunque hay cosas que por nada del mundo debéis tocar porque la cajita se deshace -inserte emoticono de que ya le ha pasado varias veces-. Bueno como podréis ver, es la cajita que está a la derecha. A mí me gusta mucho y queda muy bien con mi blog, aunque para gustos colores, así que menos mal que se puede editar el código, jajajaja.

Sin más dilación, os dejo el código y de colorines os marco las cosas que podéis editar.


<div style="background-color: #ff6f6f; border-radius: 10px; border: 2px dotted #C74343; float: right; margin-bottom: 1em; margin-left: 1em; padding: 10px; text-align: justify; width: 180px;">
<div style="text-align: center;">
<u>INSERTE TÍTULO AQUÍ</u><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="INSERTE IMAGEN AQUÍ" imageanchor="1" px="" style="clear: left; float: center; margin-right: 1em;" width:=""><img border="0" src="INSERTE DE NUEVO LA IMAGEN AQUÍ" width="140" /></a></div>
</div>
<div style="text-align: justify;">
INSERTE TEXTO AQUÍ</div>
</div>

  • background-color: #ff6f6f: Cambiando este código se cambia el fondo de la cajita.
  • border-radius: 10px; Si cambias este, puedes hacer más grandes o más pequeños los bordes redondeados. Si no quieres que los bordes estén redondeados, quítalo.
  • border: 2px dotted #C74343; el 2px es el grosor del borde, el "dotted" es el tipo de borde. En este, hace que se vean puntitos. Si quieres que el borde sea seguido, pon en vez de dotted, "solid", o busca en internet tipos de bordes, que hay varios. El número raro que va después de la almohadilla es el color del borde.
  • float: right; Este código indica dónde se colocará la cajita, si a la derecha o a la izquierda. Selecciona el que tu quieras.
  • width: 180px; En este código se muestra el ancho de la cajita.
  • width="140" ; Muchísimo cuidado con este código. Es la anchura de la imagen, pero esta a menos que no pongas la proporción exacta, se descuadrará y no se quedará en el centro, así que tienes que ir probando. Yo utilicé 40px menos que en el tamaño de la anchura de la caja, pero si no funciona tratad de averiguar el número que sí encajaría.

Bueno, eso es todo, espero que os haya gustado mucho esta cajita. Yo la encontré y me enamoré, aunque para conseguir el código tuve que sudar, porque no aparecía por ningún lado y al final la mitad lo tuve que escribir yo, y la otra mitad editarlo.

Aún tengo que pensar para qué la usaré, a ver si le encuentro un uso. De todas formas, espero que a vosotros os haya servido y nos vemos en la siguiente entrada, lectores ♥

11 comentarios:

  1. Hola!!
    Muchas gracias por el tutorial :D
    La verdad que yo no sabía hacerlo así que me viene muy bien jajaj ;)
    Nos leemos, besos ^^

    ResponderEliminar
    Respuestas
    1. PD: Por cierto soy nueva seguidora y me gusta mucho tu blog <3
      Pásate por el mío si quieres http://flytoforeverlandwithme.blogspot.com.es/
      Yo también formo parte de la iniciativa Seamos Seguidores :3

      Eliminar
  2. ¡Que bien! Veo que estás aprendiendo a hacer cosas bastante bonitas ¡enhorabuena! La caja es muy cool :D

    ResponderEliminar
  3. Hola! Yo tengo una duda, si quiero poner la cajita con texto en un post como hago para añadirle todo lo que has dicho arriba?
    un beso!

    ResponderEliminar
    Respuestas
    1. En una entrada normal, simplemente escribes lo que quieras y luego vas a la pestaña HTML (en el editor de entradas) y pegas el código donde quieras, modificándolo a tu gusto. Si no entendiste, por favor dímelo y te lo intentaré explicar de nuevo.

      Eliminar
  4. ¡Holaaa! Te he nominado al premio Liebster Award. Si quieres saber más, entra en differentscolorsofthewind.blogspot.com

    ResponderEliminar