Añadir contenido en la cabecera en Blogger

En este tutorial les mostraré un sencillo método de añadir contenido en la cabecera en Blogger, ya sea publicidad, banners, algún script o lo que ustedes quieran sin necesidad de modificar secciones.

El tutorial:

Es posible añadir distintas cosas, como contenedores, AdSense, imágenes, enlaces, etc.

Paso 1: Añadiendo CSS:

Primero vamos a trabajar un selector con el nombre que deseemos, en mi caso le pondré de nombre de ''publicidad1''. Crearé entonces la síntaxis necesaria antes de ]]></b:skin>:

#publicidad1 {

}

Ahora que tengo el contenido básico, empezaré a dar atributos, el cual nos intereza es el valor position:absolute, con este podremos asignarle una posición al contenedor que sea estática y a su vez que no interrumpa otras cosas:

#publicidad1 {

position:absolute;

}

Ahora bien, ya tenemos el contenedor con la posición definida, procedemos a darle ubicación mediante márgenes:

#publicidad1 {
position:absolute;

margin: 23px auto 54px 635px;

}

Importante:

• El márgen de 23px es el superior.
• El que tiene asignado el valor ''auto'' corresponde al márgen derecho.
• El valor 54px corresponde al márgen inferior.
• El valor 635px corresponde al márgen izquierdo.

Ahora que tenemos nuestro contenedor con la posición y ubicación en la pantalla, podemos aplicar algunos atributos básicos como color, padding, etc, todo dependerá de qué contenido utilicemos.

Paso 2: Añadiendo el contenido en la cabecera:

Debemos saber que en la mayoría de las plantillas la cabecera se llama header-wrapper (Exceptuando las del diseñador de Blogger).


Entonces, en ''Diseño | Edición HTML'' buscaremos la siguiente sección:

<div id='header-wrapper'>

Debajo de esta, debemos pegar el tipo de contenido con el ID que elegimos en el paso 1 (En mi caso publicidad1).

Veamos unos ejemplos:

Para una imagen con enlace:

<a href='URL'><img id='publicidad1' src='URL DE LA IMAGEN'/></a>

Ejemplo:

Para un contenedor con AdSense u otro tipo de contenido:

<div id='publicidad1' style='width:468px; height:60px;'>
Código AdSense aquí
</div>

 Ejemplo:

Importante:

• Recuerda que puedes añadir lo que se te ocurra, exceptuando gadgets normales de Blogger, pero si tienes scripts u otras cosas también puedes añadirlas, todo queda a tu creatividad y criterio.
• Si la sección header-wrapper no existe en tu plantilla, entonces deberás buscar el ID correspondiente.