Añadir contenido en la cabecera en Blogger

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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger