El indagador nubero (11) - Cómo poner una blockquote bonita

Sección original del blog que consiste en mostrar aspectos literarios de esta, La Soñadora, o aspectos interesantes en general. Todo un despliegue de investigación para llegar al fondo de los más curiosos asuntos, desde ¿por qué registrarse en Google para seguir un blog? a ¿Cómo empezó la que escribe a reseñar libros?



Aunque no es lo más importante el diseño juega un gran papel dentro de un blog. Es lo que "externamente" llama primero la atención del lector, por eso está guay no solo cuidar detalles básicos como la cabecera o el fondo sino también los detalles mínimos que son los que redondean nuestro diseño.

Uno de esos pequeños detalles es la blockquote, o ese "cuadradito" que sale cada vez que citamos algo y resaltamos con las comillas. Ejemplo:

Este cuadradito de aquí :)

Puede parecer una tontería pero un blockquote bonito luce mucho más a la hora de usarlo en cualquiera de nuestras entradas: para resaltar frases de libros, para poner la ficha técnica de nuestras reseñas de libros, para bla bla...

¿Y cómo cambiar la blockquote sosa que nos viene de serie en la plantilla? ¡Yo os digo cómo! Lo único que tienes que hacer es seguir los siguientes pasos:

1. ¡Guarda tu plantilla! Antes siquiera de respirar, ¡guarda tu plantilla! Imagina que algo sale mal... quién avisa no es traidor. Para ello descárgatela desde "Plantilla" y luego "Crear copia de seguridad".

2. Ve a tu código HTML y expande artilugios.

3. Busca ]]></b:skin> y justo antes coloca este código.

blockquote {
background:url("URL IMAGEN DE FONDO") repeat scroll 0 0 #FFFFFF;
border:1px solid #CCCCCC;
font:14px/22px normal helvetica,sans-serif;
margin-bottom:15px;
margin-left:60px;
margin-top:15px;
overflow:auto;
padding:10px 5px 10px 15px;
width:480px;

Donde pone URL de la imagen podréis poner la imagen de fondo que queráis para vuestro blockquote, en mi caso, como podéis ver, es ese fondo de líneas diagonales. ¿Que no queréis un fondo y solo queréis un colorcito plano? Pues en "background" borrad todo salvo los dos puntos y ahí poned tan solo el código HTML del color que queráis, ¡y listo! Ya lo tendríais listo para usar, lo único que tenéis que hacer es escribir vuestra entrada, seleccionar el texto que queráis resaltar y seleccionar las comillas.

¿Alguna duda? ¡Preguntadlo en los comentarios y os contestaré ahí mismo! Si tenéis cualquier otra cuestión que plantearle al Indagador Nubero, ¡no dudéis en hacerlo!


Comparte en Google Plus

Sobre - Bella -

En la red me conocen como La Soñadora y administro Soñadores de Libros desde 2009. Trabajo en marketing digital en la editorial SM y estudio idiomas. Creé Las Reglas del Lector y soy una de las organizadoras y creadoras de la Blogger Lit Con. Me encantan las distopías, los buenos debates, el chocolate y hacer nuevos amigos lectores.

5 nubes :