Como Añadir un Widget en la Cabecera En Blogger

Como añadir un widget en la cabecera de pagina de blogger en la parte superior o cabecera del blog, uno de los formatos mas famoso es el anuncio de  AdSense 468×60  – ejemplo:

Pero como añadir algo en la cabecera de blogger ,ya sea un anuncio de Adsense , una barra de busqueda, botones de social media  o un widget? Pues sencillamente añadiendo una seccion en la cabecera. Primero que nada, añadir un espacio extra para acomodar el widget,para esto nuestra cabecera de blogger debe ser ampliada.
 Ampliar la Cabecera de blogger
Paso1: Entrar en Panel de Blogger  > Plantilla > Editar HTML y hacer una copia de seguridad o backup de tu plantilla
Paso 2: Da Click en cualquier area del codigo y abrir caja de busqueda usando teclas CTRL + F :

Paso 3: Buscar este pedazo de codigo:

/* Header
———————————————– */

Nota: Si no lo encuentras, busca solo por primera linea:

/* Header

Paso 4: Reemplacelo con este codigo:

/* Header
———————————————– */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Cambia los pixels en rojo por el alto y el ancho de la imagen de la cabecera de blogger y cambia float: left; por float: right;si deseas cambiar la posicion de tu logo.
Paso 5: Encuentra el siguiente codigo:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Paso 6: Reemplazalo con el siguiente codigo:

<b:section class=’header header-left’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

Ahora “Preview” tu plantilla, notaras que el color de fondo de la cabecera de Blogger no es visible o no se encuentra. Para recuperarlo o reestablecerlo, necesitas añadir algunos codigos:
Paso 7. Encuentra el siguiente codigo:

    </div>
</div>
<div class=’header-cap-bottom cap-bottom’>
<div class=’cap-left’/>

Paso 8. Ahora antes del codigo anterior, pega lo siguente:

<div style=’clear:both;’/>

Nota: Si no puedes hallar el codigo del paso  7, busca el siguiente en su lugar:

      <b:include name=’description’/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

…y pega el codigo del paso 8 debajo de este.

Añadir una seccion extra para acomodar un gadget/widget a la Cabecera de Blogger
Let’s go one step forward and add an extra gadget section within Blogger header in new template designers.
Paso 9. Justo debajo del codigo del paso  8,pegue el siguiente codigo justo antes/arriba de este:

<b:section class=’header-right crosscol’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’/>

Paso 10. Ahora encuentra esta etiqueta:

]]></b:skin>

Paso 11. Pega arriba de ]]></b:skin> , este codigo de CSS :

.header-right {
display:inline-block;
float:right;
width:400px;
}

Cambia el ancho que esta marcado en color rojo.Aumenta o disminuye los pixels de acuerdo a tu necesidad y posicionamiento de la nueva seccion de la cabecera.
Paso 12. Guarda la Plantilla.
Paso 13. Luego todo lo que debes hacer es ir a Diseño y Añadir un Gadget  a la nueva seccion de cabecera en Blogger.

Que te entretengas.

Read More