Sección de banners en cada entrada en Blogger
En esta oportunidad, y a petición de un usuario anónimo les mostraré cómo añadir una sección de banners en las entradas de Blogger tal como lo tengo yo añadido en mi blog.
Tiene como característica ser aleatorio, es decir que se mostrará uno al azar al cambiar o actualizar la página.
Prueba actualizando esta entrada y verás que el banner en la zona superior de la entrada cambiará.
En ''Diseño | Edición HTML'' marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente sección:
Reemplaza los valores correspondientes y guarda los cambios. Recomiendo el uso de banners de 468x60px.
1. Para agregar un nuevo banner simplemente haz lo siguiente:
Pega el siguiente código debajo de la última imagen:
En donde deberás cambiar ''imagenes[4]'' por el número de la imagen.
Después cambia el siguiente valor:
Deberás poner la cantidad de banners que tienes añadidos (Incluyendo el cero).
2. Si el banner se vé poco alineado realiza los siguientes pasos:
Cada imagen tiene el atributo siguiente
Reemplaza el valor por uno mayor para aumentar el margen izquierdo y disminúyelo obtener el efecto contrario, hazlo con todas las imágenes.
Tiene como característica ser aleatorio, es decir que se mostrará uno al azar al cambiar o actualizar la página.
Prueba actualizando esta entrada y verás que el banner en la zona superior de la entrada cambiará.
¿Cómo añadirlo a Blogger?
En ''Diseño | Edición HTML'' marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente sección:
<div class='post-body entry-content'>Justo arriba pega el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imagenes = new Array(4)
imagenes[0] = "<a href='URL1' target='_blank'><img border='0' src='URL-IMAGEN-1' style='padding-left:80px;' title='Título del banner 1'/></a>"
imagenes[1] = "<a href='URL2' target='_blank'><img border='0' src='URL-IMAGEN-2' style='padding-left:80px;' title='Título del banner 2'/></a>"
imagenes[2] = "<a href='URL3' target='_blank'><img border='0' src='URL-IMAGEN-3' style='padding-left:80px;' title='Título del banner 3'/></a>"
imagenes[3] = "<a href='URL4' target='_blank'><img border='0' src='URL-IMAGEN-4' style='padding-left:80px;' title='Título del banner 4'/></a>"
aleatorio = Math.random() * (imagenes.length)
aleatorio = Math.floor(aleatorio)
document.write(imagenes[aleatorio])
</script>
</b:if>
Reemplaza los valores correspondientes y guarda los cambios. Recomiendo el uso de banners de 468x60px.
Consideraciones:
1. Para agregar un nuevo banner simplemente haz lo siguiente:
Pega el siguiente código debajo de la última imagen:
imagenes[4] = "<a href='URL5' target='_blank'><img border='0' src='URL-IMAGEN-5' style='padding-left:80px;' title='Título del banner 5'/></a>"
En donde deberás cambiar ''imagenes[4]'' por el número de la imagen.
Después cambia el siguiente valor:
imagenes = new Array(4)
Deberás poner la cantidad de banners que tienes añadidos (Incluyendo el cero).
2. Si el banner se vé poco alineado realiza los siguientes pasos:
Cada imagen tiene el atributo siguiente
padding-left:80px;
Reemplaza el valor por uno mayor para aumentar el margen izquierdo y disminúyelo obtener el efecto contrario, hazlo con todas las imágenes.
