Los Blockquotes en blogger

Siendo utilizados para destacar porciones de un artículo tanto como frases cortas como extensos párrafos, los blockquotes poseen un estilo distinto que atrae al lector hacia algo importante. En blogger podemos añadir blockquotes con un simple clic.

Cuando creas una entrada utilizando el editor encontrarás un botón como el de la siguiente imagen:

Resultado (utilizando un código en lugar de texto):



Afortunada o desafortunadamente, tal y como queramos verlo, blogger incluye en la plantilla unas líneas de CSS que determinan el estilo del blockquote y por tanto el aspecto que éste tendrá.

En esta entrada quiero explicarte la forma de personalizar este elemento tan útil por lo que seguir los siguientes pasos te ayudará a conseguir blockquotes que se adapten a las necesidades de tus obras.

Diseño>Edición de HTML>expandimos artilugios

Busca un bloque similar a este:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ahora, justo debajo añade este otro:

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;
}

Reemplaza URL IMAGEN DE FONDO por la dirección de la imagen de fondo que vayas a utilizar. En caso de desear un color de fondo, reemplaza esta línea:

background:url("URL IMAGEN DE FONDO") repeat scroll 0 0 #FFFFFF;

Por esta otra:

background:#FFFFFF;

En mi caso utilicé el código de color #FFFFFF (blanco) pero puedes editarlo con la tabla de colores.

Puedes editar el borde en la línea border:1px [gorsor] solid [estilo] #CCCCCC [color]; (donde mis descripciones aparecen en color verde).

Si deseas modificar el ancho del blockquote aumenta o disminuye el valor 480 de la línea width:480px;.

En caso de querer ajustar cualquier otro parámetro y desconocer la forma de hacerlo deja un comentario para que pueda ayudarte.