En esta ocasión voy a mostrar un tutorial que hará que los artículos de tu blog se vuelvan más coloridos, con 5 opciones de color que crearán citas, notas e información sobre el artículo de tu blog más coloridas y visuamente mas agradables.
Por qué debería usar Color Box?
Una de las razones por las que los blogs con un artículo extenso deben utilizar un cuadro de color es para que el lector no se aburra de ver escritura de arriba a abajo sin notas o resúmenes de información útil. Con la caja de color en el artículo los visitantes no se aburrirán mientras leen.
Interesado en hacerlo? Siga el tutorial a continuación.
1. Vaya a Blogger > Plantilla > Editar HTML. Coloque CSS a continuación, justo encima del código ]]></b:skin>
/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}
2. Guardar plantilla.
Para poner en la entrada el cuadro de color,debes estar en modo HTML en el editor de publicaciones, seleccione el modo HTML e pega uno de los códigos de cuadro de color con el texto que deseas adentro.
Failure is not the end , but the beginning for us who want to think.
<div class="colorbox purple">
Failure is not the end , but the beginning for us who want to think.
</div>
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
<div class="colorbox blue">
To achieve a goal , sometimes we have to take a detour . Failure is one of them.
</div>
One person who tried and failed , is better than a thousand people who had never tried.
<div class="colorbox green">
Person who tried and failed , is better than a thousand people who had never tried.
</div>
Do not always go with the flow , be yourself.
<div class="colorbox red">
Do not always go with the flow , be yourself.
</div>
Failure is part of the effort , not the result that makes us give up so easily.
<div class="colorbox orange">
Failure is part of the effort , not the result that makes us give up so easily.
</div>
Eso es todo. Espero que este truco les gusto. Si es asi no se olviden de poner en los comentarios como les fue implementandolo.