Mini-tutorial: Cómo incluir cajas o líneas en tus entradas (I)

26/9/17


¡Hola a todxs!

Hoy os traigo un mini-tutorial que me pidió una seguidora en los comentarios cuando os conté cómo escribía mis entradas:

Post
En el post de hoy voy a enseñaros cómo agrego las líneas en mis posts y más adelante os contaré algunos pasos o tips para diseñar la plantilla de vuestro blog. La verdad es que el diseño no es lo mío así que voy a necesitar tiempo. :P

También añadir que para que el post no se quede demasiado largo: voy a dividirlo en dos partes ésta es la primera, evidentemente y en la segunda parte os enseñaré como utilizar estos elementos de forma fija en tus posts y cambiar la letra del texto.

¡Vamos allá!
Las líneas y cajas que veis en los posts no son imágenes sería un caos total hacerlo con imágenes, son códigos HTML nuestro gran amigo. :D
Es mucho más sencillo de lo que parece: tengo que decir que todo esto lo he aprendido de los tutoriales de Miss Lavanda que es un blog que ya no existe, así ni los códigos, ni la información que os voy a dar no es mía, originalmente, sino de la administradora de este blog. De todas formas hay muchos blogs de diseño que sabrán mucho más sobre este tema que yo, pero bueno, voy a intentar explicarlo de la mejor posible. :D

primeros pasos
Lo primero que tienes que hacer es irte a Blogger y hacer clic en "Entrada nueva", para empezar un nuevo post.

Una vez dentro de la página del post, tienes que irte a la parte superior izquierda y hacer clic en "HTML". Ahí es donde tienes que pegar el código con la caja o línea que vayas a diseñar a continuación.

Te recomiendo que vayas jugando con las opciones para diseñar la caja o línea, y una vez que hayas decidido el diseño, lo pegues en el HTML del post.

el código

</div style="background: #transparent; border-bottom: 4px solid #F78181; border-top: 4px dashed #F7BE81; border-left: 4px dotted #9FF781; border-right: 4px double #81BEF7; padding: 25px; text-align: center;"Este es el diseño de la caja del código</div>

Todos los colores #XXXXXX puedes cambiarlos, pero tienes que utilizar un código HTML. Si quieres que sea transparente, el código es: #transparent, o por lo contrario, también puedes eliminar el código del color, es decir: eliminar #XXXXXX.
  • background: fondo de la caja
  • border-bottom: borde inferior de la caja
  • border-top: borde superior de la caja
  • border-left: borde izquierdo de la caja
  • border-right: borde derecho de la caja
  • border: si quieres que todos los bordes tengan el mismo diseño, puedes borrar las líneas anteriores y escribir simplemente border: y el diseño de las líneas del borde.
  • padding: es la distancia entre el borde la caja y el texto
  • text-align: la alineación del texto, puede estar centrado (center), a la izquierda (left) o a la derecha (right).
Este es el diseño de la caja del código
Si copias este codigo directamente en la plantilla HTML y no sale así, comprobad que el código esté igual, porque a veces a Blogger se le va la pinza y no funciona, y tenemos que cambiarlo manualmente.

Para modificar el diseño de las líneas de los bordes, esto es lo que podéis hacer:

 </div style="background: #transparent; border-bottom: 4px solid #F78181; text-align: center;"Este es el diseño de la línea inferior</div>
  • border-bottom: el borde correspondiente como decía antes, si queréis que todos los bordes sean iguales, podéis borrar estas líneas y poner simplemente border:.
  • px: es el grosor de la línea - cuanto más mayor sea número; más grosor, y viceversa
  • solid: es el diseño de la línea. Si has sido un poco observadorx, habrás visto que he puesto los diseños básicos en el código de antes, pero te lo dejo también por aquí: solid línea sólida; dashed - línea a guiones; dotted - línea a puntitos; double - línea doble.
  • #: simplemente, a continuación, incluís el código del color HTML.
Si no quieres una caja, sino simplemente, una línea: es muy sencillo. Simplemente con el primer código, elige qué línea quieres que sea: inferior (border-bottom), superior (border-top), izquierdo (border-left) o derecho (border-right), y borra las líneas que sobran:
Este es el diseño de la línea inferior

introducir el código
Si quieres incluir la caja o línea para un post en concreto, es decir, no quieres que sea un elemento fijo para cada post que escribas, es una buena idea que redactes tu post entero, incluyendo todos los elementos que quieras incluir imágenes, vídeos, etc. y por último, incluyas el código HTML, si es la primera vez que lo vas a hacer, para que no sea tanto lío.

Para esto es muy útil que, en el espacio en el que quieres poner la caja o línea, dejes un espacio grande para que luego sea más fácil saber dónde pegar el código porque una vez tengas redactada la entrada, la plantilla HTML del post es un caos.
*
En fin, espero haberme explicado bien.

En la segunda parte, como decía, (intentaré) enseñaros cómo dejar el diseño del post siempre fijo, para que sea mucho más cómodo y tengamos menos preocupaciones, y cambiar la fuente del texto y poder personalizarlo como queramos.

Si tenéis dudas al respecto, dejádmela en los comentarios e intentaré resolverlas, pero recordad que no soy una experta. xD

¡Espero que os haya gustado y que os sea útil!


me encantaría que me dejaras en los comentarios: si me he explicado bien :p, si quieres que haga pronto la segunda parte, qué otros mini-tutoriales te gustaría que trajera al blog y cualquier otra cosa que te apetezca comentarme. :)

te espero en los comentarios. ¡gracias por leerme y comentar!

¡Hasta la próxima!

6 comentarios:

  1. ¡Hola! Me ha encantado esta entrada, te has explicado bastante bien (aunque a mí me den pereza estas cosas y por eso mantengo mi blog así tal cual, porque saber, sé hacerlo). Una cosa que sí te diré es que revises los dos códigos que has puesto porque se te ha olvidado cerrar el primer div en ambos. Te lo digo por si alguien que no sabe copia tu código y no le sale jeje.

    Saludos <3

    ResponderEliminar
    Respuestas
    1. Ya lo he actualizado, gracias. Aunque cuando pegué el código tal cual no me salía así, pero bueno. :)

      ¡Me alegra que te haya gustado! :D

      ¡Gracias por leer y comentar! :P

      Blue Butterfly

      Eliminar
  2. ¡Hola!
    Yo también aprendí a hacer esto con Miss Lavanda, pero hace poco intenté buscar otra cosa y me di cuenta de que había borrado el blog y toda la info se perdió :( En fin, ¡muy útil! ^^
    ¡Nos leemos!

    ResponderEliminar
    Respuestas
    1. Ya... eso mismo me ha pasado a mí. La verdad es que es una lástima porque su blog era muy útil.

      ¡Gracias por leer y comentar! :D

      Blue Butterfly

      Eliminar
  3. Hola!!

    Yo la verdad que tengo un amor-odio al HTML porque me cuesta ponerme a diseñar el blog porque me da mucho pereza ponerme a estudiar el HTML pero después veo como queda y me encanta, por eso, este verano ya me puse manos a la obra hasta que conseguir dejar el blog como me gustaba. Aún así se que me faltan muchas cosas por aprender y que este post seguro que me viene de perlas para alguna entrada

    Un beso!!
    Ainhoa de Infinity life

    ResponderEliminar
    Respuestas
    1. ¡Me alegro mucho!

      Entonces, me pondré a preparar la segunda parte. :P

      ¡Gracias por leer y comentar!

      Blue Butterfly

      Eliminar

¡Hola!
Estoy encantada de que quieras dejar un comentario. ¡Muchas gracias! El blog mejorará gracias a ti.
Pero recuerda que los SPAM y los SPOILERS no están permitidos, así como la falta de respeto hacia mí o a otro usuario que comente.
Gracias.
Blue Butterfly