Cómo personalizar los títulos de los gadgets

Hoy vamos a aprender a personalizar los títulos de los gadgets.

Para ello nos vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código:

.sidebar h2{ /**Adornar el título del gadget*/

background: #cccccc; /*Color de fondo*/

border-top: 1px solid #000000; /**Borde Superior**/

border-bottom: 1px solid #000000; /**Borde Inferior**/

border-left: 1px solid #000000; /**Borde Izquierdo**/

border-right: 1px solid #000000; /**Borde Derecho**/

text-align: center; /**Texto centrado**/

}

IMPORTANTE: Si en CSS tienes otrós códigos, basta con que des un par de intros y pegas éste.

Para personalizarlo:

• Lo que está en Verde: Son los colores (Fondo y Líneas) en hexadecimal.
• Lo que está en Azul: Es el ancho de la línea (si la quieres más ancha, aumenta el valor)
• Lo que está en Naranja: Es el tipo de Línea
• Lo que está en Rojo: es para centrar los títulos, si no los quieres centrados solo tienes que borrar esta línea del código. 

Tipos de líneas:

Double

Dashed

Solid

Dotted

También si quieres, puedes añadir una imagen de fondo al gadget. 

Aconsejo que no sea muy grande, sobre unos 100 px estaría bien.
El código que debes pegar es el siguiente:

.sidebar h2{

border-top: 1px solid #000000; /**Borde Superior**/

border-bottom: 1px solid #000000; /**Borde Inferior**/

border-left: 1px solid #000000; /**Borde Izquierdo**/

border-right: 1px solid #000000; /**Borde Derecho**/

text-align: center; /**Texto centrado**/

background-image: url('URL de la imagen' ) ; /** Dirección de la Imagen **/

}

Sería el mismo código anterior pero añadiendo en lo que va de morado, la url de la imagen. (Para conseguir la url de una imagen yo utilizo Tinypic.

También se puede colocar una imagen al lado del título pero debe de ser pequeñita. Yo para mi imagen del perrito le he puesto un valor de 40 px.

Para ello utilizaremos el siguiente código:

/**Imagen al lado del título de los gadgets**/

.sidebar h2{  

background: #ffffff url(URL de la imagen) no-repeat right;

border-top: 0px solid #000000; /**Borde Superior**/

border-bottom: 2px solid #000000; /**Borde Inferior**/

border-left: 0px solid #000000; /**Borde Izquierdo**/

border-right: 0px solid #000000; /**Borde Derecho**/

padding:5px; 

}

Debes cambiar lo que está en naranja por la url de la imagen, lo que está en rojo, es el lugar donde quieres la imagen. Si la quieres centrada sería "center" y si la quieres a la izquierda "Left". El número en azul es el ancho de la línea de abajo. Lo que está en verde es el color de la línea.

Tres formas para personalizar a tu gusto los gadgets de tu blog. A simple vista parece complicado, pero no lo es para nada... es muy sencillo. Despacito y siguiendo los pasos seguro que lo consigues! ¿Te ha resultado práctico y útil? ¡COMPARTE!