Personalizar los gadgets en Blogger : Recursos Blogger

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

Personalización individual

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

Vamos a Editar HTML:

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

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.

Personalización del título.

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

Ejemplo:

#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 */
}

► Ver personalización de BlogArchive1

Podemos poner un ícono o imagen al título de un gadget. Para ponerle un ícono o imagen a un gadget del tipo HTML, vamos a:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►en el buscador pegamos:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>

nos localizara un código como éste:

<b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Vamos a:

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

Ejemplo:

.post-title{
color: #000; /* Color del título */
background: url(URL de la imagen) center left no-repeat;
text-transform: uppercase;
font-size:16px !important;
text-align: center;
letter-spacing: 2px;
text-shadow: #999 1px -1px 1px;
border-top: 2px double #666;
border-bottom: 2px solid #666;
border-right: 0px double #666;
border-left: 0px double #666;
}

Así habremos puesto una imagen o ícono antes del título. Para que la imagen quede a la derecha del título cambiamos left por right.

!important funciona como una palabra clave para ignorar las reglas de cascada predefinida en la plantilla HTML. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra.

Ver personalización de post-title

Personalización del contenido.

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

Ir a:

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

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

Personalización general.

Podemos personalizar todos los gadgets de la sidebar.

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

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

► Ver etiquetas personalizadas.

Páginas