Tutoblog para ti #11: Cuadros para texto de entradas.

¡Holaa lectores! Hoy les traigo un tutorial bastante 'completo', por así decirlo. 
Como ya varios bloggeros me preguntaron cómo colocaba los cuadros o cajitas de textos en mis entrada, cómo les editaba el color, tamaño y otros aspectos, decidí hacer un tutorial con todos los códigos de los cuadros que más utilizo en mis entradas, indicando cómo se puede modificar cada detalle de ellos.
Espero que me haya explicado bien y que el tutorial les resulte de utilidad...

☕ Cuadro 1º:

TEXTO DE LA CAJITA

<div style="background-color: #ffd0c2; text-align: center; border: 3px solid #a991af; padding:5px; ">

TEXTO DE LA CAJITA</div>

*El primer código que esta en rojo es el color que tendrá el fondo y el segundo código es el color que tendrá el borde de la cajita. Ustedes pueden modificarlo por el color que quieran, pero no olviden dejar en # ya que si no el código con sólo los números no les servirá.
*Lo que está en azul, es la alineación que tendrá la cajita. Si quieren que esté a la izquierda, en lugar de center (centrado) escriben left o a la derecha right.
*Lo que está en verde es para modificar el tamaño del borde. Lo mejor es que no supere los 3 px, sino quedará muy grande. 
*Lo que está en anaranjado es el 'estilo' de la cajita. 
Pueden modificarlo colocando las siguientes palabras:

__________ Solid

.................... Dotted

--------------- Dashed

========= Double

*El último color es para que el texto no nos quede pegado al borde; cuanto más grande es el valor, mayor será el espacio entre ambos.

☕ Cuadro 2º:

TEXTO DE LA CAJITA.

<div style="background-color: #ffd0c2; border-left-color: #a991af; border-left-style: solid; border-left-width: 5px; font-size: 14.49px; line-height: 21.735px;">
<div style="border-right-color: #a991af; border-right-style: solid; border-right-width: 5px;">
<div style="padding: 8px;">
<div style="text-align: center;">
TEXTO DE LA CAJITA.</div>

-La modificación es básicamente la misma que la del cuadro anterior: 
*El primer código que esta en rojo es el color que tendrá el fondo y el segundo código es el color que tendrá el borde de la cajita. Ustedes pueden modificarlo por el color que quieran, pero no olviden dejar en # ya que si no el código con sólo los números no les servirá.
*Lo que está en azul, es la alineación que tendrá la cajita. Si quieren que esté a la izquierda, en lugar de center (centrado) escriben left o a la derecha right.
*Lo que está en verde es para modificar el tamaño del borde. Lo mejor es que no supere los 3 px, sino quedará muy grande. 
*Lo que está en anaranjado es el 'estilo' de la cajita. 
Pueden modificarlo colocando las siguientes palabras:

__________ Solid

.................... Dotted

--------------- Dashed

========= Double

*El último color es para que el texto no nos quede pegado al borde; cuanto más grande es el valor, mayor será el espacio entre ambos.

☕ Cuadro 3º:

TEXTO DE LA CAJITA

<blockquote style="background-color: #ffd0c2; border-color: #a991af; border-radius: 7px; border-style: dashed dashed dashed solid; border-width: 2px 2px 2px 15px; margin: 0px; padding: 4px; text-align: justify; transition: 1s;">
<div style="text-align: justify;">
<div style="text-align: left;">
<div style="text-align: left;">
<div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: #ea9999; font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif; font-size: medium;">TEXTO DE LA CAJITA</span></div>

-Nuevamente la modificación es  la misma que la de los cuadros anteriores. 
*Todo lo que esta en negrita corresponde al estilo del texto que se encuentra dentro de la cajita. Ustedes mismos pueden modificar el texto con la herramientas que les proporciona blogger.

☕ Cuadro 4º:

TEXTO DE LA CAJITA

<blockquote class="tr_bq" style="background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbpRJGpUWlOcsWGegzaE31U6pV6_2RfBkmmBUhgzkcD7Aa3NnE8jTULYEmS8AI7qZqUiPiRbE2JAy7sxwMvRK7GDzq8OsegoCNBc0621H4oxOYvU1EOh73oL_GoRDtOuz4PpaahWNujJw/s1600/quote.png&quot;); background-repeat: no-repeat; border-bottom-color: #ffd0c2; border-bottom-style: dotted; border-bottom-width: 2px; border-top-color: #ffd0c2; border-top-style: dotted; border-top-width: 2px; margin-bottom: 10px; margin-left: 25px; margin-top: 10px; padding-left: 32px; padding-top: 3px; text-align: justify;">
<div style="line-height: 26.25px; margin: 0px; padding: 0px; text-align: center;">
TEXTO DE LA CAJITA</div>

-Realizan la misma modificación que en los tres cuadros anteriores.

Para integrar estas cajitas en sus entradas, solo copian y pegan el código (en lo posible ya editado) en el código HTML de la entrada.
Es un poco lento y tediosos el proceso, ya que hay que estar buscando y pegando los códigos, modificando los px, pero si tiene paciencia y les gusta, este tutorial les resultará de utilidad.

Hasta aquí llegó el tutorial de hoy, espero que les haya gustado  y resultado de su utilidad, el próximo domingo subiré otro tutorial, el cual ustedes deben eligir mediante una votación (Gadget de votación titulado "Tutoblog #12", en la parte superior del blog).

 Si no quieren perderse nada, recuerden suscribirse y seguirme en mis redes sociales.

¡Un abrazo literario!