25.10.15

Cómo enmarcar un texto en Blogger || Tutorial


¡Hola a todos, limoneros! ¿Qué tal estáis? Hoy os traigo el segundo tutorial del blog. El primero, por si no lo recordáis, fue el personalizar el anuncio de cookies:




Estoy totalmente segura de que hay mucha gente que lo sabe hacer, puesto que el código corre por internet desde hace tiempo, pero también estoy segura de que muchos otros no lo sabrán (Yo misma no sabía hasta hace un mes) ¿Estáis prepaados? ¡Allá vamos!

Para poner bordes a un texto, solo necesitamos este código:

<div style="border: 2px solid #5D0202; padding: 5px;
">Aquí dentro va el texto al que le aplicamos el estilo</div>


RECORDAD: Para que nos salga en la entrada, debemos ponerlo con el modo HTML, y no en modo "redactar". 





Con este código, el texto enmarcado nos quedaría exactamente así:




Soy un texto enmarcado. ¡Hola!




Ahora os explico el código. Como podéis ver, es muy muy simple porque solo consta de dos cosas: 

1. Border: es el ancho del borde, en este caso de 1px. Cuántos más píxels, más ancho será el borde. Además, hay muchas formas disponibles para el borde, solo tenéis que escoger la vuestra y ponerla junto a los píxeles.
    
Finalmente, el borde puede tener el color que queráis: podéis poner el código HTML del color (lo recomendado) o directamente el nombre del color en inglés (black, blue, red…), pero los colores pueden no tener el tono que queréis. Como ya iréis viendo, soy una firme defensora de los códigos HTML para los colores, puesto que hay una infinita variedad.








2. Padding: es el espacio entre el marco y el texto. Si ponéis un padding de 0px, el texto quedará totalmente pegado al marco, lo cual es un poco antiestético, por lo cual os recomiendo que siempre pongáis padding, aunque sean unos pocos píxeles: 


Soy un texto sin padding





Soy un texto con padding de 10px


co
Soy un texto con padding de 20px ¡Uau!

Como veis, para tener un borde simple solo necesitamos este código. Pero no tenemos por qué tener todos los bordes del mismo color o al mismo tiempo: podemos usar el borde que queramos según nuestras necesidades. Podemos usar el borde de arriba, el borde de abajo, o el borde de cada lado por separado. Además, podéis poner un olor diferente para cada borde Para ello tenemos los siguientes códigos, depende del que queramos usar:

border-top: 1px solid #5D0202; → Borde de arriba
border-bottom: 1px solid #5D0202; → Borde de abajo
border-left: 1px solid #5D0202; → Borde de la izquierda
border-right: 1px solid #5D0202; → Borde de la derecha



Imaginaos que solo queréis tener el borde de la izquierda y el de abajo, entonces el código sería así:


Soy un texto con solo el borde lateral izquierdo y el borde inferior, cada uno de un color diferente. 


Este es mi código: <div style="border-left: 3px solid #5D0202; border-bottom: 3px solid #1DF67F; padding:5px;">Aquí dentro va el texto al que le aplicamos el estilo</div>




No solo podemos decidir qué borde queremos usar, sino que también podemos poner un color de fondo al recuadro, igual al color del borde o diferente al mismo. Para ello solo necesitamos añadir, al código sencillo que ya tenemos, este código  “background: #FFD2D2;



Soy un texto con todos los bordes y con un fondo de color.


Este es mi código:  <div style="background: #FFD2D2; border: 1px solid #5D0202; padding:5px;"> Aquí dentro va el texto al que le aplicamos el estilo </div>






Finalmente, podemos decidir qué alineación queremos para el texto desde el HTML. Esta característica es opcional, y sirve básicamente para ahorrarse un poquito de tiempo:                           




Soy un texto con una alineación centrada. Pero también puedo tener un alineado a la derecha (right) o a la izquierda (left). Además, solo tengo el borde lateral izquierdo y un fondo de color.


Este es mi código: <div style="background: #FFD2D2; text-align: center; border-left: 3px solid #5D0202; padding:5px;"> Aquí dentro va el texto al que le aplicamos el estilo </div>






¡Y esto es todo! Espero que os haya quedado claro y que os sido de utilizad. Podéis ir probando cuál es el código que os va mejor, con qué colores os gustan más… ¡La única limitación es vuestra imaginación! Si tenéis alguna duda, no dudéis en comentármela :D


¿Y vosotros, tenéis recuadros en el blog? ¿Cómo los hacéis? ¿Qué colores soléis usar para vuestros diseños? Me encantará leeros ^^



Psst, pstt: ¿Te quieres perder la próxima entrada del blog? Si la respuesta es no, ¡apúntate!  SÍGUEME 

14 comentarios:

  1. Madre mia!! muchas gracias!!! porque es algo que no sabía ni que se podía hacer!!

    ResponderEliminar
  2. ¡¡Ala, me has abierto el mundo!! jajaja No sabía cómo se hacía esto, así que tomo nota *-* ¡Gracias!

    ¡Besos!

    ResponderEliminar
  3. ¡¡Esto es lo que quería yo!!! Me costó horrores ponerlo, pero ya lo tengo.
    Si lo hubieras puesto antes me hubiera ahorrado comerme la cabeza jajaja, pero gracias, ya sé que lo tienes aquí por si lo vuelvo a necesitar.

    Besos ^^

    ResponderEliminar
  4. Hola :)
    Gracias a ti sé que hay más de 3 tipos de bordes, porque yo sólo conocía esos xD. Tomo nota de todo lo que has puesto porque seguro que lo voy a necesitar en un futuro.
    Muchísimas gracias ♥

    ResponderEliminar
  5. ¡Uau! Es super útil, haz más de estos, por fi. Gracias por tu post, me ha encantado. ¡Besos! ^^

    ResponderEliminar
  6. Vaya! No sabía yo esto, me parece muy útil y tenlo por seguro que lo voy a usar. Ahora mismo me guardo la página en favoritos para poder usarlo próximamente.
    Muchas gracias por compartirlo

    un besooo

    ResponderEliminar
  7. Hola :) Solo diré GRACIAS! por que andaba buscando algo parecido a esto para una idea del futuro. Un besin^^

    ResponderEliminar
  8. Muchas gracias!! Lo tendré en cuenta.
    Besos!

    ResponderEliminar
  9. Hale, ya tengo el mío hecho. Llevaba tiempo buscando este tutorial pero al no tener un nombre concreto no me aparecía... al menos como yo lo quería xD
    ¡Gracias por los tutos! :P

    ResponderEliminar
  10. Gracias, me ha ayudado muchísimo. Entre todos los tutoriales que he visto es el mejor que está explicado

    ResponderEliminar
  11. No sabes cuánto te amo en este momento. Fue el único tutorial decente que encontré. Gracias!!!!!!!!! :3

    ResponderEliminar
  12. Gracias por este tutorial..! Lo usé y quedó precioso, le reduje el ancho (acorde al texto) y redondeé las puntas. Ahora quisiera darle un efecto de sombra o bisel, como si ese cuadro de texto no estuviera "pegado" al blog. Se puede? cómo se hace?? Gracias por tu hermoso blog!

    ResponderEliminar
  13. Me encanta, lo estoy utilizando muchísimo en mi blog y le voy añadiendo diferentes colores... Mil gracias.

    ResponderEliminar
  14. ¡Hola! Pues no sabes el tiempo que llevo buscando un tutorial y no lo encontraba asi que muchas gracias! No te seguía pero ya lo hago! te espero por mi blog! besos!

    https://unasmaravillasdelibros.blogspot.com.es/

    ResponderEliminar

Muchas gracias por tomarte el tiempo de comentar. Un blog se alimenta de tus comentarios. Y todos los comentarios son una gran alegría para mí ^^