Personaliza tu blog: Blockquote

¡Buenassssss! Hoy les traigo una pequeña guía de los Blockquotes y cómo editarlos un poco. El siguiente será acerca de las barras de desplazamiento, quiero abarcar cosas que son muy sencillas de editar, pero que a simple vista captan mucho la atención al ser diferentes a lo usualmente visto.

Primero que todo debemos saber ¿Qué es un blockquote?
Es un texto citado, podemos añadirlo a nuestras entradas con las comillas que aparecen a la hora de redactar las mismas, y se una para resaltar o enfatizar un texto.

Tengo dos formas de añadir un blockquote a mi blog.

Usando .post-body blockquote {

Que crea un blockquote que solo se puede usar dentro de las entradas,

o usando blockquote { que crea uno que se puede usar en todos lados.

¡Aquí les dejo algunos diseños!

Para añadirlos vayan a 

Plantilla >> Editar html

buscamos ]]></b:skin> y arriba pegamos el código de nuestra preferencia.

Blockquote 1

Antes de pasar el cursor.

Luego de pasar el cursor.

.post-body blockquote{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIOp8wI_3ntehcGXM9SPpoN1JYYXerTN9rE7yWvIxb1ZIGfsRQA0ONDWSlcmfJ5aIQgUeuiXvF5hXw2IMhkMIoz3Pgjae40IlJq9njuDhdyQ4PeJwj-EaeXNi_IA5nDL60pzwK3ZvAB3y/s1600/grey.png);

padding:10px;

text-align: RIGHT; /*Posición de la letra: LEFT:Izquierda RIGHT:Derecha CENTER:Centro*/

font-family: trebuchet ms; /*Estilo de letra*/

font-style: italic;

border:4px double #a7a7a7; /*Color del borde*/

color:#ff7087; /*Color de la letra dentro del blockquote*/

text-shadow: 1px 1px 0px #747474; /*Color de sombra de la letra dentro del blockquote*/

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

}

.post-body blockquote:hover{

border-radius:20px; /*Radio del borde*/

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

}

Blockquote 2

Antes de pasar el cursor.

Luego de pasar el cursor.

.post-body blockquote {
background: #FFEBF4; /*Color de fondo del blockquote*/
border: 1px solid #ffa0c8; /*Color del borde*/
color: #FF006B; /*Color de la letra dentro del blockquote*/
font-family: century gothic; /*Estilo de letra*/
font-weight: normal;
font-size: 11px; /*Tamaño de la letra*/
text-align: RIGHT; /*Posición de la letra: LEFT:Izquierda RIGHT:Derecha CENTER:Centro*/
padding: 7px;
border-radius: 25px; /*Radio del borde*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
.post-body blockquote:hover {
background: #FFEBF4; /*Color de fondo del blockquote*/
border: 1px solid #FF006B; /*Color del borde*/
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

Blockquote 3

.post-body blockquote {
background: #f5e6a9 url('https://i.imgur.com/ppM0af8.png') top left no-repeat;
box-shadow: inset 0 0 6px #d6ba49; /* Color de sombra interior del menu */
color: #020202;/* Color del texto*/
text-shadow: 1px 1px 0px #FFFFFF;
margin: 14px 15px 3px 3px;
padding: 12px 15px 10px 32px;
font-size:15px;
font-family: trebuchet ms;
font-style: italic;
}

Creo que eso ha sido todo por este post.

¡Nos leemos!