AyudaBloggers{...}
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:

Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers