Personalizar títulos de los gadgets individualmente en Blogger

Hace pocos días atrás hice un tutorial sobre cómo personalizar los títulos en Blogger de forma global, es decir, título del blog, de las entradas y de los gadgets.

En esta oportunidad mostraré un método de personalizar cada título de los gadgets de manera individual para darle un poco de contraste de colores a nuestro blog.

Podemos apreciar el resultado en la siguiente imagen:

El tutorial:

Paso 1: Modificando la estructura de un gadget:

En ''Diseño | Edición HTML'' marcaremos la casilla ''Expandir plantillas de artilugios''. Buscaremos en la plantilla el título del gadget que deseemos modificar, en mi caso será el gadget ''Síguenos en Facebook''. Encontrarás un código muy similar a este:

<b:widget id='HTML3' locked='false' title='Síguenos en Facebook' 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 código anterior corresponde a todo el gadget, pero la línea que nos interesa es la que está destacada con color rojo.

Deberás asignarle un ID con el que trabajaremos posteriormente. Para ello reemplázala por el siguiente código:

 <h2 class='title' id="gadget-nombre"><data:title/></h2>

Reemplaza el texto subrayado por el ID deseado.

Realiza este mismo paso con los gadgets que desees modificar posteriormente.

Paso 2: Personalizando el título:

Ahora que ya hemos asignado el ID al título del gadget, es posible editarlo pegando el siguiente código antes de ]]></b:skin>:

#gadget-nombre {
/*atributos*/
}

Crea este código tantas veces hayas creado los IDs, y renombra ''gadget-nombre'' por el o los ID(s) asignado(s).

Deberás dar los atributos que consideres necesarios, veamos un ejemplo:

#gadget-nombre {
background:#8ea730; /*color de fondo*/
padding:5px; /*espaciados*/
color:#fff; /*color del texto*/
font-weight:bold; /*negrita*/
border:none; /*sin bordes*/
}

Los códigos de color verde puedes eliminarlos, son sólo comentarios.