Cómo personalizar nuestros gadgets en Blogger

Para personalizar los gadgets podemos hacerlo de dos formas:
1.- Personalización individual
2.- Personalización general

Personalización individual.

Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos.

1.- Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

2.- Localizamos la sección en donde se encuentran las identificaciones de los gadgets de la sidebar, ubicada al final de la plantilla, y cuyo código es como el siguiente, poniendo una línea del mismo dentro del rectángulo de búsqueda (search):

<b:section-contents id='sidebar-right-1'>
<b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/>
<b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/>
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>
<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/>
</b:section-contents>

El anterior código corresponde a un blog con seis tipos de gadgets. Cada uno de los entrecomillados resaltados en rojo es la identificación de cada uno de los gadgets, y es la que debemos tener en cuenta para personalizarlos. Y los entrecomillados resaltados en amarilo son los tipos de gadgtes.

El primer gadget añadido, de cada tipo, tiene en su ID (identificación) el número uno, Ejemplo: HTML1; los demás que agreguemos, dentro de su tipo, sigue el consecutivo,

Ejemplo: HTML2, HTML3, HTML4, etc.

3.- Teniendo identificados los gadgets ponemos, antes de la etiqueta ]]></b:skin> , los códigos con los cuales los vamos a personalizar. Las identificaciones de los gadgets las debemos poner exactamente igual a como están en los códigos correspondientes, teniendo en cuenta mayúsculas y minúsculas, y precedidas del símbolo #.

Personalización del título.
Personalizaremos el titulo del gadget corrrespondiente al archivo del blog, cuya ID es BlogArchive1 utilizando la etiqueta h2 , que es la que pone el título, por defecto.
Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:

#BlogArchive1 h2{
  color: #0b3861; /* Color del título */
  background: #58acfa; /* Color del fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
}

Podemos poner un ícono o imagen al título de un gadget, pero tendremos que utilizar el código del mismo. Para ponerle un ícono o imagen a un gadget del tipo HTML, por ejemplo, expandimos plantillas de artilugios y localizamos un código como éste:

<b:widget id='HTML1' locked='false' title='Título 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>

Antes de <data:title/> pegamos esta línea:

<img src="Aquí URL de la imagen o ícono" style="padding-right:5px;"/>

Debiendo el código quedar así:

<b:widget id='HTML1' locked='false' title='Título 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'><img src="Aquí URL de la imagen o ícono" style="padding-right:5px;"/><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Así habremos puesto el ícono antes del título. Para que el ícono quede después del título pegamos la línea indicada después de <data:title/> y cambiamos right por left .

Personalización del contenido.

Personalizaremos el contenido de un gadget del tipo Text , cuya ID es Text1 , utilizando la clase .widget-content .

Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:

#Text1 .widget-content{
  color: #0b3861; /* Color del texto */
  background: #58acfa; /* Color del fondo */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño la fuente */
}

Personalización general.

Podemos personalizar uniformemente todos los gadgets de la sidebar.

Personalizacón general de los títulos.
Sin expandir plantillas de artilugios localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:

.sidebar h2 {
  color: #0b3861; /* Color del título */
  background: #58acfa; /* Color del fondo */
  text-align: center; /* Título en el centro */
  font-weight: bold; /* Título en negrilla */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
}

Personalización general de los contenidos
Antes de la etiqueta ]]></b:skin> pegamos el siguiente código:

.widget-content{
  color: #0b3861; /* Color del texto */
  background: #58acfa; /* Color del fondo */
  font-family: Verdana; /* Tipo de fuente */
  font-size: 12px; /* Tamaño de la fuente */
}