Tutorial Blogger: Personalizar los títulos de los gadgets

Hola!!!
Hoy os traigo unos cuantos tutoriales de como editar y decorar los títulos de los Gadgets. Suerte!!!


Mini Tutorial 1: Centrar los títulos de los gadgets

Es tan fácil como ir a Plantilla → Personalizar → Avanzado → y Seleccionar Añadir CSS

Y en el cuadro de añadir código pegamos lo siguiente:

.widget .title { text-align:center; } /**Título de gadget centrado**/

Y ya está! La primera cosa más fácil, echa! Si no queréis centrar los títulos, este apartado no hace falta que lo hagáis. 

Mini tutorial 2: Adornar/Decorar el título del gadget

Volvemos a realizar los pasos anteriores, pero esta vez pegamos este 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**/

}

Como siempre, podéis cambiar la anchura de los bordes, y el color. Yo el color lo hago con este programa; es muy fácil y sencillo; colorhexa. 

Y por si no lo sabéis, Solid se puede cambiar por lo siguiente: 

Solid                                                            

Dotted.........................................................

Dashed-------------------------------------

Double_____________________________

Mini tutorial 3: Poner una imagen de fondo en el título del gadget

.sidebar h2{

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

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

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

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

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

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

}

En realidad, es bastante sencillo solo hace falta tiempo y paciencia!

Mini tutorial 4: Poner una imagen al lado del título del gadget

Por último, este mini tutorial de como poner una magen al lado del título!!!

/**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; 

}

Right (derecha), es el lado donde se situará la imagen, lo podéis cambiar por left (izquierda).

Yo he Echo éste último, y así es como me ha quedado!

Hermosooo!! Jajajaja!

Comentad!♥♥♥♥♥♥

Mucha suerteee!!