¡Hola a todos, lectores! Hoy os traigo el segundo tutorial del blog. El primero, por si no lo recordáis, fue cómo personalizar el anuncio de cookies en 5 minutos. El tutorial que os traigo hoy irá sobre CÓMO ENMARCAR LOS TEXTOS EN LAS ENTRADAS.
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) ¡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>
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í:
Con este código, el texto enmarcado nos quedaría exactamente así:
Soy un texto enmarcado. ¡Hola!
Este código es muy simple y solo consta de dos cosas:
1. Border: es el ancho del borde, en este caso de1px. Cuántos más píxels, más ancho será el borde. Además, hay muchas formasdisponibles 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
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. Desde que lo descubrí lo estoy usando en las reseñas y me va genial. 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: el próximo tutorial irá sobre cómo cambiar el texto que sale por defecto en blogger cuando tenemos comentarios (Sí, ese soso "5 comentarios:") ¿Os lo queréis perder? Si la respuesta es no, apúntate al blog → SÍGUEME