Cómo personalizar los titulos de los gadgets

Hoy en Novedad Blogger les enseñaré algo básico y sensillo, que consta en darle un mejor aspecto a los titulos de los gadgets personalizandolo con un poco de CSS.

Puedes personalizar los titulos de los gadgets de forma general, es decir, que el cambio se aplique para todos los titulos de los gadgets, o puedes hacerlo individualmente para que el cambio solo se aplique a ciertos gadgets que tú elijas.



Empezemos por lo más facil...

PERSONALIZAR LOS TITULOS DE LOS GADGETS DE FORMA GENERAL

.sidebar h2 {
/* acá van todos los atributos */
}

PERSONALIZAR LOS TITULOS DE LOS GADGETS DE FORMA INDIVIDUAL

Ahora para personalizarlos individualmente, es necesario agregar un identificador al gadget en la edición html de tu plantilla.

Para hacerlo nos dirigimos a Plantilla, Editar HTML, presionamos CTRL+F y buscamos el título de nuestro gadget, en mi caso el gadget que buscaré será "Estamos en Facebook", y allí te aparecerá un código muy similar a este:

    <b:widget id='HTML7' locked='false' title='Estamos 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>

Lo que tenemos que hacer es reemplazar el código que se encuentra resaltado en rojo por lo siguiente:

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

Lo resaltado en azul es el identificador que usaremos para darle el estilo CSS (reemplazar con el nombre deseado).

Ahora que ya se asignó una id al gadget que personalizaremos, nos dirigimos a los estilos CSS, es decir antes del ]]></b:skin> y para personalizarlo usaremos lo siguiente:

#id-gadget {
/* acá van todos los atributos */
}

Y reemplazas los que se encuentra coloreado en verde por todos los atributos que desees como por ejemplo... 

#id-gadget { 
color: #fff;
background: #141F9D;
padding: 6px;
}