AyudaBloggers{...}
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.
Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers