Personalizar los gadgets en Blogger

Para personalizar los gadgets en Blogger, podemos hacerlo de dos formas:

✒ Personalización individual de los gadgets del blog

Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos. Para esto vamos a Editar el HTML de nuestro blog de blogger:

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

en el pegamos

<b:section-contents id='sidebar-right-1'>

Nos mostrara la sección donde se encuentran las identificaciones de los gadgets de la sidebar, cuyo código es como el siguiente:

<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>

Este código corresponde a un blog con seis tipos de gadgets. Cada uno de los entrecomillados resaltados en rojo es como se identifica cada uno de los gadgets, es lo que debemos tener en cuenta para personalizarlos. Los entrecomillados resaltados en azul son los tipos de gadgtes.

Teniendo identificados los gadgets ir a:

• Plantilla 
• Personalizar 
• Diseñador de Plantillas 
• Avanzado 
• Añadir Código CSS Personalizado,en el recuadro pegar el Código correspondiente. 

Ejemplo personalizar el titulo de BlogArchive1

#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

#BlogArchive1 h2{
color: #0b3861; /* Color del título */
background: url(URL de la imagen) center left no-repeat;
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 */
}

Para que la imagen quede a la derecha del título cambiamos left por right.

►La identificación de los gadgets la debemos poner exactamente igual a como están en los códigos de nuestra HTML, teniendo en cuenta mayúsculas y minúsculas, anteponiendo el símbolo #.

✒ Personalización del contenido del blog.

Teniendo en cuenta los Elementos de la plantilla de Blogger podemos personalizar gadgets o widget de nuestro blog

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

Ir a para esto ir a:

• Plantilla
• Personalizar
• Diseñador de Plantillas
• Avanzado
• Añadir Código CSS Personalizado,en el recuadro pegar el Código:

Ejemplo:

.sidebar .widget {
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 2px solid #eee;
}
.sidebar .widget-content {
margin-top: 15px;
}
.sidebar .widget h2 {
border-bottom: 1px solid #eee;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
}