Estilos de Blockquotes (citas)

Los "blockquotes" son secciones de texto dentro de la entrada que generalmente se usan para resaltar citas de otras fuentes, aunque pueden usarse para destacar otro tipo de texto.
En mi caso por ejemplo, lo uso para destacar el código de los "trucos" que explico.

La mayoría de las plantillas de Blogger incluyen en su CSS un estilo definido para los blockquotes; para aplicarlo debemos seleccionar el texto a incluir en el blockquote y pinchar en el botón del editor de entradas que muestra unas comillas.

El resultado será algo como esto:

Vamos a ver unas cuantas formas de mostrar nuestras citas destacadas dentro de la entrada de una forma más original; para eso tendremos que cambiar o modificar el CSS que las plantillas de Blogger añaden por defecto.

En primer lugar localizamos este código en nuestra plantilla sin expandir artilugios:

.post blockquote {
  margin:1em 20px;
  }

[1] Cambiamos ese código por este otro y guardamos cambios:

.post blockquote{
margin:1em 20px;
border-left:4px double #704B0F;
border-right:4px double #704B0F;
padding-left:10px;
font-size:100%;
color:#333;
font:Arial Georgia Serif;
}

El resultado cada vez que apliquemos las comillas (blockquote) a una selección de texto será este:

[2] Cambiamos por este otro:

.post blockquote{
width:320px;
font:14px/22px normal helvetica,sans-serif;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
padding-left:15px;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-left:5px solid #27707F;
border-top:1px solid #27707F;
border-bottom:1px solid #27707F;
border-right:1px solid #27707F;
overflow:auto;
background:#ffffff url(http://bp1.blogger.com/_sbaQpFxeL1Q/R8yT9e_CdPI/AAAAAAAAAFw/4E0nxy2orrs/s400/code-bg.gif);
}

Como resultado obtendremos el blockquote del Escaparate:

En este caso como lo uso para mostrar códigos a veces demasiado extensos, lleva incluida una barra de desplazamiento que se aplica de forma automática si el contenido del blockquote supera su ancho (320px).

[3] Cambiamos por este:

.post blockquote {
background: url(http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SNrz0aBqzFI/AAAAAAAAETQ/qepjbVkuPek/s320-R/link.png) left top no-repeat;
padding: 3px 22px 10px;
text-align: left;
color:#1a0603;
border:1px solid #9e8e91;
margin:8px 10px;
}

Resultado:

[4] Cambiamos por este:

.post blockquote {
float:left;
color:#777;
width:200px;
padding:6px;
margin-right:10px;
position:relative;
font-size:15px;
text-align:left;
font-style: italic;
border-top:4px solid #3096E9;
border-bottom:4px solid #3096E9;
}

Resultado:

[5] Cambiamos por este:

.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #BA0033;
   background: transparent;
   border-left: 5px solid #BA0033;
}

Resultado:

[6]Cambiamos por este:

.post blockquote {
   width:250px;
   margin: 10px 0 10px 50px;
   padding: 10px;
   text-align: justify;
   font-size:15px;
   color: #fff;
   background: #000;
   border-left: 4px solid #BA0033;
   border-bottom: 3px solid #BA0033;
}

Resultado:

Como veis las posibilidades son muchas, solo hay que "jugar" un poco con el CSS...