Cómo personalizar el blockquote o texto citado

Por si no lo sabías, Blogger nos facilita una opción que permitirá enmarcar ciertas partes que deseamos diferenciar o resaltar en el texto de una entrada. Aunque en el caso de este blog, se utiliza para enmarcar códigos.
Para integrarlo en la entrada de tu blog, basta con encerrar (en la Edición HTML de tu entrada) el texto que deseas citar entre <blockquote> y </blockquote>. O de la forma más simple, utilizando el icono "" que se encuentra en el editor de entradas.

Ejemplo de blockquote o texto citado

Como verás, el estilo no será el mismo que tenga tu blog. Aunque quizá tu blockquote no se encuentre personalizado si es que utilizas las nuevas plantillas de Blogger. En ese caso, te enseñaré a cómo personalizarlo.

Cómo personalizar el blockquote en Blogger:

Nos dirigimos a Plantilla→Editar HTML, presionamos CTRL+F y buscamos .post blockquote ó blockquote y borras todo lo que se encuentra entre el { y }, es decir, lo siguiente:

.post blockquote {
Todo
el
contenido
}

Todo eso, en el caso que encontrases cualquiera de esos dos códigos.

Estilos de blockquote

Puedes Añadir el que más te guste, insertándolo antes del ]]></b:skin>.

Estilo 1: Borde izquierdo y contorneado por lineas

Código

.post blockquote {
background-color:#F5F5F5; /* Color de fondo */
border-color:#CCC; /* Color del borde */
border-style:dashed dashed dashed solid; /* Borde punteado */
border-width:1px 1px 1px 5px; /* Ancho del borde */
color:#666; /* Color del texto */
padding:10px; /* Espacio entre el texto y el contorno */
}

Estilo 2: Comilla en la esquina izquierda, con fondo gris sobre el texto

http://4.bp.blogspot.com/-b99Kyw_z4aM/VgOFnUA5upI/AAAAAAAAF2w/0xVDP330BmQ/s1600/blockquote%2B%252302.png

Código:

.post blockquote{
width: 75%; /* Ancho del bloque */
background: #F6F6F6; /* Color del fondo */
position: relative; /* Posición del bloque */
padding: 20px 30px; /* Espacio entre el texto y el contorno */
font-style:italic; /* Texto en estilo cursiva */
border: none; /* Sin bordes */
margin: 0 auto; /* Espacio entre el bloque y elementos externos */
margin-bottom: 15px; /* Espacio entre la parte inferior del bloque y elementos externos */
}
.post blockquote:before {
background:#2dcb73 url(http://2.bp.blogspot.com/-x6UNdKXyTP4/Uho8Vvg32_I/AAAAAAAAAQI/M8P-4g3M6Uk/s1600/Blockquote.png) no-repeat; /* Imagen de la comilla */
content: "\f10e"; /* Icono de la comilla */
position: absolute; /* Posición del elemento */
left: -32px; /* Espacio desde la izquierda*/
text-align: center; /* Alineación del texto */
line-height: 32px; /* Espacio por encima y debajo del elemento */
color: #FFF; /* Color del texto */
top: 0; /* Espacio desde arriba */
width: 32px; /* Ancho */
height: 32px; /* Altura */
}

Estilo 3: Borde naranja izquierdo, fondo y contorno gris.

Código:

.post blockquote{
margin: 20px; /* Espacio entre el bloque y elementos externos */
color: #666; /* Color del texto */
border: solid 1px #c3c5c9; /* Borde del bloque */
padding: 20px; /* Espacio entre el texto y el borde del bloque */
font-weight:300; /* Grosor del texto */
background: #F8F8F8; /* Color de fondo */
border-left: 20px solid #ef4423; /* Borde izquierdo */
}

Estilo 4: Entre lineas y comillas

Código:

.post blockquote {
background:url(http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png)no-repeat; /* Imagen de la comilla */
padding-left:32px; /* Espacio izquierdo entre el texto y el borde del bloque */
padding-top:3px; /* Espacio superior entre el texto y el borde del bloque */
margin-left:25px; /* Espacio izquierdo entre bloque y elementos externos */
color:#777; /* Color del texto */
font-style:italic; /* Estilo de letra cursiva */
font-size:14px; /* Tamaño del texto */
line-height:22px; /* Espacio por encima y debajo del texto */
border-top: 1px dotted #b5b5b5; /* Borde superior */
border-bottom: 1px dotted #b5b5b5; /* Borde inferior */
margin-top:10px; margin-bottom:10px; /* Espacio superior entre el bloque y elementos externos */
}