Personalizar títulos de los gadgets individualmente en Blogger

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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger