Personalizar gadgets de forma individual en Blogger

En este tutorial explicaré como personalizar cada uno de los gadgets de manera individual en nuestras plantillas.

Para lograr esto se requiere conocimientos básicos de CSS por lo que no será complicado.

Paso 1: Identificando el ID del gadget:

Para llevar a cabo esto, debemos saber el nombre del gadget que deseemos personalizar, en mi caso utilizaré mi gadget ''Categorías'':

Primero, debemos ir a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios''. Una vez realizado esto buscamos el nombre del gadget a personalizar (en mi caso buscaré ''Categorías'').

Nos aparecerá un resultado muy similar a este código:

<b:widget id='Label1' locked='false' title='Categorías' type='Label'>

El código de color verde corresponde al ID del gadget el cual trabajaremos, en mi caso este gadget se llama ''Label1''.

Paso 2: Personalizando el Gadget:

Una vez que ya sabemos el ID del gadget a personalizar, creamos la variable con la que trabajar, la variable contiene el siguiente formato:

#Label1 {
}

Esta deberá ser creada arriba de ]]></b:skin>, la cual corresponde a nuestra zona de estilos.

Hecho esto, añadimos los estilos que deseemos.

Añadiendo una imagen de fondo:

Añadimos la propiedad background a la variable en la que trabajaremos:

background: #fff url('URL IMAGEN') center;

De tal forma que quede así:

#Label1 {
background: #fff url('URL IMAGEN') center;
}

Personalizando el color del texto:

Añadimos la propiedad color en la variable CSS:

color: #000;

Deberá quedar así:

#Label1 {
background: #fff url('URL IMAGEN') center;
color: #000;
}

Personalizando otros elementos del gadget:

Podemos dar formato a distintas cosas como a los enlaces, viñetas, título, etc. Para ello debemos conocer cómo se escriben cada parte:

• h2 (Corresponde al título del gadget)
• a  (Corresponde a los enlaces.)
• a:hover (Corresponde al enlace al pasar el mouse)
• li (Corresponden a las viñetas)

Existen muchos valores, por lo que me detendré a trabajar sólo con estos.


Primero, creamos la variable de la misma manera que hicimos la anterior, pero esta vez añadiremos lo que deseemos modificar, en este caso personalizaré el título:

#Label1 h2 {
}

 Una vez creada la variable, añadiremos los estilos que deseemos:

#Label1 h2 {            /* TITULO*/
color: fff;                   /*Color de la fuente*/
padding-left: 20px;    /* Espaciado a la izquierda*/
font-size: 20px;         /* Tamaño de la fuente*/
}

Utilizaremos otro ejemplo, en este caso el de los enlaces con el cursor encima:

#Label1 a:hover {            /* ENLACES*/

color: 000;                   /*Color de la fuente*/

}

Pueden ver un ejemplo de un sólo gadget personalizado: