Poner caja -o bloque- de colores para resaltar texto de una entrada

Resaltar parte del texto de una entrada podría ayudarnos a indicar al lector que esa parte podría resultarle interesante

En una entrada siempre es conveniente resaltar alguna parte de esa entrada que a nuestro juicio nos parece no solo necesario sino importante, pues esto vendría a dar más énfasis a lo que queremos decir en esa entrada. Hacerlo no tiene nada de extraordinario ni tampoco hay que ser experto en código html. Apenas si debemos saber manejar unas cuantas teclas y listo.

¿De qué caja de colores hablo? 

Pues más o menos de esto:

Aquí puedes poner el texto que quieres resaltar dentro de la caja

Aquí puedes poner el texto que quieres resaltar dentro de la caja

¿Qué te parece? Pues tampoco es que fuese lo máximo pero de que resulta simpático hay que admitirlo. Y de que nos ayudaría a resaltar parte del texto que nos interesa de nuestra entrada, pues ni dudarlo.

Así que sin más vayamos a ver cómo podemos ponerlo en nuestro blog. Lo primero que hay que hacer es entrar en el blog, ir hasta personalizar, opciones avanzadas y al final hasta llegar a agregar CSS. Allí vamos a pegar el siguiente código:

/* Content Boxes
———————————————————— */
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
margin: 0 0 25px;
overflow: hidden;
padding: 20px;

border-radius: 9px;

-webkit-box-shadow: 1px 1px 4px 0px #CCC;

box-shadow: 1px 1px 4px 0px #CCC;
}

.content-box-blue {
background-color: #d8ecf7;
border: 1px solid #afcde3;
}

.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}

.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}

.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}

.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}

.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
[/css]

Perfecto. Este será el que le dé la forma a la caja de colores. Damos en aplicar al blog y cuando vayamos a escribir una entrada en el blog tendremos que pegar este otro código en el lugar que queremos que quede:

<div class="content-box-purple" style="color:#fa8531">Aquí puedes poner el texto que quieres resaltar dentro de la caja</div><br/>

Este código debes pegar cuando escribes tu entrada en la opción html y no en la opción redactar pues aunque muchos blogs interpretan el thml, hay otros que lo ponen tal como lo pegas si escribes en redactar, por eso es mejor no correr riesgos y hacer las cosas de modo correcto.

En el primer código están los bloques de colores que tienen cada bloque, solo debes elegir el color de fondo que desees, yo aquí elegí el purple. En #fa8531 es el color de la leyenda que pondrás dentro de ese cuadro. También puedes sustituirlo con el código de color que desees.  

Aunque hay códigos más cortos y listos para tan solo pegar, el inconveniente con estos es que si no se los pone dentro del blog donde debe ir el CSS, el día que te cambies de lugar o migres de sitio la función de este código se irá a la basura. Y quedarás con la triste tarea de actualizar todo lo que posteaste con ese código. Además, ponerlo en el blog, blogger te lo facilita por lo que es mejor hacerlo como debe ser.