Personalizar los gadget

Cada ves que agregamos un nuevo gadget se crea un nuevo código en nuestra plantilla.

Según el tipo de gadget es el tipo de ID que se crea.

Si creamos un gadget del tipo HTML/Javascript sera algo así:

De esta forma lo vemos desde Edición HTML.

<b:widget id='HTML1' locked='false' title='EL TITULO DEL GADGET' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

El ID que se creo en el ejemplo es HTML1, y si creamos otros gadget este cambiará aumentando el número, HTML2, HTML3, etc...

El ID cambiará según el tipo de gadget que agregemos.

Hay varios tipos de gadget, no solo HTML, como por ejemplo: CustomSearch, Label, BlogArchive, Followers, etc...

Hay varias formas de personalizar los gadget, pero lo primero que tenemos que saber es el ID del gadget que queremos personalizar.

Para saber el ID lo podemos hacer desde Edición HTML o desde Elementos de la página.

En la imagen vemos un ejemplo de un gadget HTML, pero como dije antes, este va a variar según el tipo de gadget.

Apuntamos el ID para que no se nos olvide.

Nos vamos a Edición de HTML y expandimos plantillas de artilugios.

Ahora le voy a mostrar varias formas de personalizar los gadget.

Personalizar el título.

Agregar un icono o imagen antes o después del título:

Hay que buscar el ID del gadget, lo podemos hacer con Ctrl+F y colocamos el ID (ejemplo HTML1)

Veremos un código igual o parecido al mostrado al principio.

Donde vemos: <h2 class='title'><data:title/></h2> colocamos la imagen.

Ejemplo con imagen antes del título:

<h2 class='title'><img src="URL de la imagen" style="padding-right:5px;"/><data:title/></h2>

Ejemplo con imagen después del título:

<h2 class='title'><data:title/><img src="URL de la imagen" style="padding-left:5px;"/></h2>

Cambiamos la URL de la imagen.

padding-right:5px y padding-left:5px es la distancia entre la imagen y el título.

También se puede hacer desde el CSS de la plantilla.

A los ejemplos le voy a poner la ID HTML1.

En CSS una ID tiene que tener # por delante.

Cambiamos HTML1 por el nombre de la ID que copiaron anteriormente.

Justo arriba de ]]></b:skin>

Poner el siguiente código:

#HTML1 h2 {
background:url(URL de la imagen) no-repeat left center;
padding:5px;
}

Cambiar URL de la imagen.

Cambiar left por right si se quiere mostrar la imagen al final del título.


Hay muchas formas de personalizar el título de un gadget.

Podemos también agregarle una imagen de fondo, cambiar el color del fondo o personalizar el texto.

La forma es hacerlo desde el CSS de la plantilla.

Asi que los códigos los colocaremos arriba de ]]></b:skin>

Siempre sustituir HTML1 de los ejemplos por el nombre de la ID que ustedes eligieron para personalizar.

Imagen de fondo:

El código varia según el tamaño de la imagen.

#HTML1 h2 {
background:url(URL de la imagen) no-repeat;
}

Color de fondo:

#HTML1 h2 {
background: #ffffff;
}

Cambiar #ffffff por el color que mas les guste.

Color del texto:

#HTML1 h2 {
color: #ffffff;
}

Borde:

#HTML1 h2 {
border: 1px solid #ffffff;
}

También se le puede poner borde solo en una parte del título cambiando border: por border-bottom: para abajo, border-top: para arriba, etc..

La forma que se imaginen para personalizar el título se puede hacer siempre mediante CSS.

Lo que tienen que tener en cuenta es la ID del gadget y agregarle la etiqueta H2 que es la que lleva por defecto el título de los gadget en blogger.

#HTML1 h2 {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Personalizar el contenido.

Es igual que se hace para personalizar los títulos.

La forma es hacerlo es desde el CSS de la plantilla.

Asi que los códigos los colocaremos arriba de ]]></b:skin>

Lo que tendremos que cambiar es la etiqueta H2 por la clase .widget-content

#HTML1 .widget-content {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Perzonalizar todos los gadget de la sidebar.

La forma anterior es para personalizar individualmente los gadget, pero si queremos personalizar todos los gadget de la sidebar con el mismo estilo lo hacemos con el siguiente código:

Los títulos:

.sidebar h2 {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

El contenido:

.widget-content {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}

Ver blog con ejemplos:

Les recomiendo leer algún manual de CSS: Acá y Acá