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;
———————————————————— */
.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;
}
background-color: #d8ecf7;
border: 1px solid #afcde3;
}
.content-box-gray {
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
background-color: #e2e2e2;
border: 1px solid #bdbdbd;
}
.content-box-green {
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
background-color: #d9edc2;
border: 1px solid #b2ce96;
}
.content-box-purple {
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
background-color: #e2e2f9;
border: 1px solid #bebde9;
}
.content-box-red {
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
background-color: #f9dbdb;
border: 1px solid #e9b3b3;
}
.content-box-yellow {
background-color: #fef5c4;
border: 1px solid #fadf98;
}
[/css]
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.
