Para tu blog... Blockquote (citas) con estilo.

En los blogs de reseñas es bastante útil el blockquote para poner los datos del libro que se reseña o copiar pequeños trozos de un libro y que nadie nos acuse de plagio. Generalmente el blockquote sviene por defecto en casi todas las plantillas, pero si no viene o quieres cambiar su apariencia sólo hay que editar un poco el HTML del blog.

En el HTML del blog debería aparecer si buscamos (Ctrl+F) dentro del código la palabra 'blockquote', que es el código que debemos editar (a veces viene como .post-body blockquote).  Si al buscar no aparece ningún resultado podemos añadir los códigos que he puesto un poco más abajo antes de ]]></b:skin>.

Blockquote simple y cómo editarla.

.post-body blockquote {
font-size:100%;
background: #fff;
font-family: "Muli", Helvetica, Arial, Sans-Serif;
color:#999;
border: 1px solid #000000;
padding: 15px;
}

Este es un blockquote extremadamente simple que se puede editar de forma muy sencilla para ajustarlo al diseño del blog.

- En verde, el tamaño de la fuente. Podemos usar otros valores y otras unidades como píxeles, e ir aumentando o disminuyendo el tamaño para que se pueda leer.
-  En azul, el color de fondo, que se puede modificar cambiando el 'fff' por cualquier otro color hexagesimal.
- En rojo, la fuente que tendrá la letra dentro de la cita. En este ejemplo he usado Muli, una fuente que he añadido mediante google fonts. Si no quieres instalar esa fuente, puedes cambiar 'Muli' por Arial o cualquier fuente de serie.
- En naranja, el color del texto. Yo recomiendo que sea ligeramente distinto al resto de la entrada, para resaltar la cita.
- En morado, el borde. Ahora nos centraremos un poco más en el borde, porque se le pueden dar varios estilos.

Cambiar el borde.

El borde del blockquote (y cualquier otro elemento) puede tener varios estilos. Antes que nada debemos saber cómo funciona; primero se indica el ancho de la línea (en el ejemplo 1px) luego un estilo (en el ejemplo solid) y finalmente el color. El valor de "solid" puede cambiarse dependiendo de lo que queramos conseguir por las siguientes palabras:

- Dotted.  El borde en vez de una línea sólida estará hecho de pequeños puntos. (···········)
- Dashed. En vez de la línea sólida, las líneas se compondrán de pequeñas rayas. (--------)
- Double. En vez de una sola línea sólida, estará formado por dos líneas sólidas, una dentro de otra.

Opciones de fondo

Un color sólido de fondo puede resultar muy soso para algunos, pero como el CSS permite muchísimas posibilidades podemos usar una imagen que se repita de forma indefinida para que sea el fondo del blockquote. Si vamos a usar una imagen debemos pensar que encima va texto, así que debe ser lo más clara posible. Para hacer esto sólo tenemos que cambiar la línea azul del código un poco hasta que quede así:

background: #fff url (http://www.aquílaurldelaimagen.com);

Podemos fusionar tanto un color de fondo y una imagen que se mostrará en las esquinas que queramos, para ello debemos borrar la línea azul y añadir lo siguiente:

background: url(http://quilaurldelaimagen.com) no-repeat top right;
background-color: #fff;

Cosas a tener en cuenta:
- Dependiendo de dónde se muestre la portada del libro en nuestro blog (en mi caso es en la izquierda) debemos situar el fondo del blockquote al lado contrario (derecha).
- El color de fondo hexagesimal debe ser el mismo que el color de fondo de la imagen que hemos usado para que así se complemente bien.

Jugueteando con todo esto podemos hacer el blockquote que queramos, como por ejemplo:

He decidido empezar esta sección con algo realmente sencillo pero que algunos no saben cómo editar (de hecho yo aprendido alguna que otra cosilla nueva al elaborar esta entrada). Espero que los 'tutoriales' que vaya subiendo os sean de utilidad y si alguno quiere saber cómo se hace alguna cosa puede enviarme un e-mail desde la zona de contacto (incluso de forma anónima) y yo intentaré hacer una entrada.