Truco Blogger: dar color a un post

El post de hoy es un sencillo truco para resaltar una entrada en concreto dándole color o un grupo de entradas, de hecho si tienes paciencia se puede usar de varias formas, e incluso existe la posibilidad de añadir una imagen en el fondo del post en vez de un fondo de color plano. Para que veas el efecto que tiene lo tienes aplicado en este mismo artículo con un color suave, aunque puedes elegir cualquier color. Te doy el código HTML, te explico como se aplica y que significa cada parte de él para que puedas modificarlo para tu blog. Además te comento sus limitaciones y como puedes emplear esto para mejorar tu bitácora, ya que lo que importa es lo que aplicamos.

CÓDIGO HTML TRUCO BLOGGER

<div style="background: #eeffdd; padding: 10px;">

Aquí escribimos nuestro post

</div>

Cómo llevar a término este truco en Blogger. Como puedes ver lo único que hay que hacer es abrir el editor de Blogger en la pantalla HTML (en la de redactar no!) incluir dos líneas de código HTML, la primera al inicio del post, incluso antes de las imágenes. La segunda al finalizar la entrada, para cerrar la orden que hemos dado. Escribe algunas letras entre los dos códigos y ya podrás pasar a escribir con normalidad tu artículo.

Aplicaciones e ideas.
Su función es resaltar algunos posts en concreto, ya que si queremos que todas las entradas tengan siempre el mismo color hay otras formas mejores de hacerlo. Aunque también sirve para crear cajas y zonas de color dentro de la entrada, ya que con el mismo código he creado arriba el cuadrado donde se presenta el código HTML.

1. Texto de advertencia, peligro o añadir un mensaje urgente!!!! Si por algún motivo hay algo que quieres resaltar, dando la alarma sobre algo en concreto, puedes añadir un fondo amarillo a tu entrada y dejar el texto en negro, seguro que enseguida que entren a tu blog verán lo que les quieres decir.
2. Destacar una entrada o grupo de entradas. Para esto bastará un color suave. Por ejemplo, tienes un blog sobre coches y al final de la semana escribes una entrada resumen de las novedades de los últimos días. Si haces esto de forma repetitiva, es una buena idea marcar todas las entradas que pertenecen a este grupo con un color diferente, de esta forma las personas que buscan esta información la encontrarán de una forma más rápida.
3. Diferenciar los autores del blog por colores. Algo similar te puede servir si en el blog escribís varios autores, si cada uno de ellos incluye un código de fondo diferente.
4. Cuadrado de color en el post. Se puede usar para resaltar una parte de la entrada con un cuadrado de color.
5. Imagen de fondo. Se puede modificar el código HTML para incluir una imagen, aunque eso ya lo explicaré detalladamente.

Modificar el código HTML del truco.

• Cambiar el color. Debes cambiar el código #eeffdd, que es para un color azul claro por otro código similar, tipo #000000, #119933, #4455aa. Cada combinación de números es un color, y ademas de los números del 0 al 9 también se incluyen la letra a, b, c i d, que se corresponden a los valores que van de 10 a 13. Para el color blanco el código es #ffffff, por lo que los colores de letras y números grandes son claros. Para el negro se emplea el #000000.
• Separar el texto de los bordes. Tienes que cambiar el valor de padding, que en el ejemplo lo tienes con 10 pixeles. Si quieres más separación coloca 20px, 35px o la cantidad que prefieras. Si escribes 0 px, las letras estarán pegadas al borde.
• Que el post tenga un borde invisible alrededor del cuadrado de color. Esto se realiza aplicando la cualidad margin, que es muy similar a padding.

Limitaciones.

• No es lo que se utiliza para dar color a todos los posts, para eso se usa CSS.
• Los bordes no pueden ser redondeados, para ello requerimos aplicar códigos CSS3.
• No permite colores degradados, para eso se usa CSS3.