Tutorial {3 Blockquotes o Citas}

Hola!, como les va? espero bien... hoy me a pasado una cosa tan horrible, se me habíá perdido el móvil y estuve súper asustada buscándolo, pero en fin. Espero les guste este tutorial tan fácil de unos blockquotes muuy lindos:

Blockquote #1

Live Preview

• Antes que nada revisa que no has hecho ningún otro tutorial para editar los blockquotes

1. Vamos a Plantilla > Editar HTML
2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
3. Buscamos:

]]></b:skin>

     4.   Pegamos el siguiente código arriba de ]]></b:skin>

blockquote {
border-right: 7px solid #FFB0CA; /* Grosor, estilo y color del borde de la derecha */
border-left: 7px solid #FFB0CA;  /* Grosor, estilo y color del borde de la izquierda */
background-color: #F2EDEF; /* Color del fondo */
padding: 10px;
font-size: 11px; /* Tamaño de la font */
color: #7F7F7F; /*Color de la font */
text-align: center; /* Ubicación de la font */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px; /* Radio de los bordes */
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #D2D0D5; /* Sombra del blockquote */
-webkit-transition-duration: .50s;
}
blockquote:hover { /* Cuando pasas el cursor */
border-right: 11px solid #DA8AFF; /* Grosor, estilo y color del borde de la derecha */
border-left: 11px solid #DA8AFF; /* Grosor, estilo y color del borde de la izquierda  */
background-color: #F2EDEF; /* Color del fondo */
padding: 10px;
font-size: 11px; /* Tamaño de la font al pasar el cursor */
color: #999999;
text-align: center; /* Ubicación de la font */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;  /* Radio de los bordes */
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #D2D0D5; /* Sombra del blockquote */
-webkit-transition-duration: .50s;
}

Blockquote #2

Live Preview

• Antes que nada revisa que no has hecho ningún otro tutorial para editar los blockquotes

1. Vamos a Plantilla > Editar HTML
2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
3. Buscamos:

]]></b:skin>

     4.   Pegamos el siguiente código arriba de ]]></b:skin>

blockquote {
margin-top: 9px;
background-color: #A9E2C7; /*Color de fondo*/
padding: 8px;
font-size: 11px; /*Tamaño de la Letra*/
color: #FC7C7C; /*Color de la letra*/
text-shadow: 1px 1px 0px #B5F7D7; /*Color de la sombra de la Letra*/
text-align: center;
outline-style: dashed; /*Tipo de la linea de adentro*/
outline-width: 1px;
outline-color: #fff; /*Color de la linea de adentro*/
outline-offset: -3px;
-webkit-transition-duration: .50s;
}

Blockquote #3

Gracias a not a single song | Live Preview

• Antes que nada revisa que no has hecho ningún otro tutorial para editar los blockquotes

1. Vamos a Plantilla > Editar HTML
2. Buscamos (con Ctrl + F) <b:skin> y le damos clic a los puntos suspensivos de la derecha
3. Buscamos:

]]></b:skin>

     4.   Pegamos el siguiente código arriba de ]]></b:skin>

blockquote {
background-image: url(URL de tu imagen);
padding:15px 20px 15px 20px;
color: #f0467d; /* Color de la font */
border-radius: 0px; /* Radio de los bordes */
}
blockquote:hover { /* Al pasar el cursor */
background-image: url(URL de tu imagen);
-webkit-border-radius: 10px 0px 0px 10px;
color: #f0467d; /* Color de la font */
text-shadow: 0px 0px 5px ; /* Color de la sombra del texto */
box-shadow: 0 0 8px #afafaf; /* Color de la sombra de la caja */
border-radius: 0px;  /* Radio de los bordes */
}

Espero les haya gustado este tutorial y si les sirvió ayúdenme a encontrar más gente y podré publicar más. Nos leemos ^^