Código para enmarcar un texto | Tutorial

27 de julio de 2017

Hoy traigo un tutorial de html básico, como podéis ver en el título de la entrada en este caso traigo el código para enmarcar un texto en las entradas de blogger. Si queréis que haga una entrada/tutorial con algo en concreto, solo dejádmelo saber en los comentarios.

Hay muchas formas de decorar las entradas del blog, la más común es la de poner un fondo o un borde (o ambos) a un texto, o poner una imagen de fondo. Hoy os voy a enseñar cómo hacerlo de una forma sencilla.

Aquí os dejo algunos ejemplos de lo que podéis llegar a hacer usando variaciones del mismo código y más abajo os explicaré para qué sirve cada parte en negrita.

<div style="background: #EFF8FB; border-radius: 15px 5px 15px 5px; border: 3px solid #A9BCF5; font-family: Trebuchet MS, sans-serif; margin-left: 50px; margin-right: 50px; padding: 7px; text-align: justify;"> TEXTO </div>

<div style="background: #EFF8FB; border-radius: 10px 3px 3px 10px; border-left: 15px solid #A9BCF5; font-family: Trebuchet MS, sans-serif; margin-left: 200px; padding: 7px; text-align: justify;"> TEXTO </div>

<div style="background: #EFF8FB; border-top: 5px solid #A9BCF5; border-bottom: 5px solid #A9BCF5; font-family: palatino linotype; padding: 10px; text-align: center;"> TEXTO </div>

<div style="background-image: url(http://3.bp.blogspot.com/-i3ulBd8VYTc/U6WnOye1qGI/AAAAAAAABv8/jr7VEJFEU2U/s1600/pastel+blue.png); border-left: 10px solid #A9BCF5; border-right: 10px solid #A9BCF5; font-family: palatino linotype; padding: 10px; text-align: center;"> TEXTO </div>


Como veis, una vez que se entienden los diferentes componentes del código, este se puede modificar de muchas formas. A continuación voy a explicaros qué es cada componente y qué podéis añadir/cambiar para personalizarlo:

*background: es el color de fondo, podéis usar tanto los códigos de colores html (los podéis encontrar en esta página: http://html-color-codes.info/) como los nombres de los colores básicos en inglés (black, blue, green, yellow).
*background-image: simplemente tendríais que añadir la dirección a una imagen en internet dentro de los paréntesis de url(). Os aconsejo, si la vais a usar a menudo, que subáis la imagen a vuestro blog de forma que si se llega a eliminar la imagen de la fuente no se corte el enlace.
*border-radius: es el borde, puedes redondearlo más o menos ya sea poniendo más o menos px (ej: 20px). Esto es algo que puedes ir modificando según te guste, además de que al aparecer en la vista previa y en la opción de redactar de blogger, puedes ir viendo si te gusta o no cómo queda. En algunas opciones aparecen cuatro cifras para el borde, esto es cuando no quieres que todos tengan la misma curvatura, de forma que cada una es una esquina del marco.
*border: es el ancho del borde, puede ser de diferentes formas "solid" "double" "dotted" "groove" "dashed" "ridge" "inset" "outset" (prueba a ver cuál te gusta más). Como ves en el borde ya va incluido el ancho (los px) y el color, al igual que con el background, puedes usar tanto códigos como los nombres de los colores en inglés.
*margin-left: es el magen de espacio que dejas entre el lado izquierdo de la entrada y el cuadro de texto.
*margin-right: es el magen de espacio que dejas entre el lado derecho de la entrada y el cuadro de texto.
*padding: es el espacio entre el marco y el texto, esto es esencial para que quede bonito ya que si no lo pones el borde del marco va a estar pegado al texto.
*font-family: es la fuente, esto es opcional. Yo la pondría para evitar hacerme un lío con los códigos y así no tener que añadir la fuente al texto que vaya dentro del marco.
*text-align: al giaul que la fuente también es opcional. Si quieres que el texto esté alienado de forma diferente al resto de la entrada y ahorrar códigos, te recomiendo que lo pongas directamente en el marco; es más cómodo.

Todo es cuestión de que vayáis probando a ver cómo quedan y qué combinación os gusta más. Espero que os haya servido. Y si tenéis alguna duda (no me suelo explicar muy bien) o alguna pregunta, podéis mandarme un mail y os responderé encantada :)

2 Reads

  1. ¡Holaa!
    Muchas gracias por tan lindo tutorial :D
    Me va a ser de mucha utilidad ya que estoy queriendo cambiar el aspecto de mis entradas XD
    Un beso ^^

    ResponderEliminar
  2. ¡Hola hola! Ya te seguía en Instagram y ahora te sigo también por tu blog. Te dejo el mío por si te apetece hacer lo mismo, si quieres deja un comentario donde más te guste: https://diariodeunachickalit.blogspot.com/ Abrazos!! ^^

    ResponderEliminar