JMiur [E]

Siguiendo la idea de la entrada anterior, ¿es posible utilizar diferentes banners en el mismo blog? Sí, hay decenas de alternativas. Una de ellas es establecer banners diferenciados para la página principal y para las páginas individuales. En el CSS "normal" colocamos la imagen por defecto y luego, antes de </head> colocamos una condición que cambiará la imagen de fondo en las páginas individuales:
<b:if cond='data:blog.pageType == &:quot;item&:quot;'>
<style>
#header-wrapper { background: transparent url(URL_IMAGEN) no-repeat left 50%; }
</style>
</b:if>
También es posible tener una lista de imágenes y hacer que estas se muestren de manera aleatoria aunque para esto, deberemos agregar algo de JavaScript. Por ejemplo, ponemos esto antes de </head>:
<style type='text/css'>
#header-wrapper {
background:transparent url() no-repeat left 50%;
/* o usamos background:transparent url() repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
window.onload = function() {
var alea;
// el valor a usar es igual a la cantidad de imágenes menos uno
alea = Math.round(Math.random()*2);
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[alea] + ')';
}
//]]>
</script>
En este demo online se puede ver el script funcionando con imágenes de tipo banner y en este otro demo, con imágenes de tipo mosaico.

De manera similar, podemos hacer que los banners o fondos roten cada cierto tiempo:
<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) no-repeat left 50%;
/* o usamos background:transparent url(URL_imagen) repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
function bannerRotativo() {
numBanner ++;
if(numBanner >= imagenHeader.length) { numBanner = 0 }
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[numBanner] + ')';
}
var numBanner = 0;
window.onload = function() {
setInterval("bannerRotativo()", 2000);
}
//]]>
</script>
El valor de 2000 es el tiempo que permanecerá visible cada banner y está expresado en milisegundos (1000 = 1 segundo). Este es un demo online que muestra un ejemplo.

Otra variante, ejecutando un scroll de una imagen:
<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) repeat left top;
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
function scrollBanner(maxSize,direccion) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) { backgroundOffset = 0; }
if(direccion==false) {
document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
} else {
document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + 'px 0px';
}
}
var backgroundOffset = 0;
window.onload = function() {
setInterval('scrollBanner(200,false)', 100);
}
//]]>
</script>
Si queremos que el scroll sea vertical, usamos el valor false:
setInterval('scrollBanner(200,false)', 100);
Si queremos que el scroll sea horizontal, usamos el valor true:
setInterval('scrollBanner(200,true)', 100);
En ambos casos, el valor 200 es el tamaño máximo a desplazar (por lo general, el ancho o alto de la imagen) y el valor 100 es el tiempo expresado en milisegundos. Este es un ejemplo de scroll vertical y este de un ejemplo de scroll horizontal.

14 comentarios:

QuéOlorTiene  

Que buena idea!!! Gracias JMiur... estaba pensando en algo parecido para mi blog la semana pasada, algo que rotara el banner y los colores internos de acuerdo a la hora del día pero no me había funcionado.

Responder
Gem@  

Ahora si creo eso que me estás espiando :O
Estaría bueno también añadir un archivo Flash:
http://vagabundia.blogspot.com/2007/05/insertar-un-swf-en-blogger.html
No es que piense hacerlo porque no sé crear esos archivos pero sería un dato más para el header.

Responder
Chacien  
Este comentario ha sido eliminado por el autor.
Responder
Lili  

Hola jmiur, en primer lugar te felicito por tu blog es estupendo, hace poco encontre esta plantilla http://www.dantearaujo.net/2009/09/blogger-video-template.html y el demo es esto http://www.bloggertube-demo-dantearaujo.blogspot.com/ , me pareció innovador y muy atractivo la plantilla el problema es que solo se puede colocar videos de youtube y quisiera saber si habria alguna forma de modificarlo para poder subir los videos de megavideo, hice el intento de adaptarlo pero no tuve exito, quizas puedas darme alguna solucion, te estaré muy agradecido. Gracias y un cordial saludo

Responder
Dña. Urraca  

Es una idea interesante, sobre todo para cuando uno se aburra de ver la misma imagen. Por cierto ¿con que o donde generas las imágenes estas para el header?

Responder
JMiur  

QuéOlorTiene: Si te fijas en esta entrada, hay un script que hace justamente eso, cambair el header en función del horario.

Gem@: Ahora, la que lee la mente es usted :D Eso vendrá en la parte 3 :D

Chacien: Si. es exactamente lo mismo, hay que cambair todas las referencias a header-wrapper por el ID del DIV de la magen. Si tienes un ejemplo online, me fijo a ver qué es lo que está fallando.

Lili: En teoría, sería posible pero, habría que crear los scripts para hacer eso; sería bastante engorroso de adaptar, rehacer la plantilla y la forma de manejarla.

Dña. Urraca: Las imágenes las tomé de la web y luego las modifique un poco con un editor de imñagenes para adaptarlas (con PaintShop Pro).

Responder
racnarok  

Y si quisiera que por ejemplo en ...search/label/deportes aparezca un titulo diferente, osea, que en todas la páginas aparezca el nombre del blog, pero en ...search/labek/deportes aparezca otro nombre.

espero haberme explicado bien xD.

Responder
racnarok  

Se me olvidaba, entonces que abria que hacer para poder lograr lo que mencione antes?

Intente poner <title>Deportes</title> en etiquetas condicionales, pero no funciono del todo, solo cambie el nombre de la barra del navegador, solo eso, pero no el de la página.

Responder
QuéOlorTiene  

Hola JMiur, aparecía cortado el link pero lo encontré:
http://vagabundia.blogspot.com/2006/12/imgenes-en-el-header.html

Es exactamente lo que buscaba, había visto algo parecido en otros sitios pero no eran claros en cómo modificar las propiedades del #header-wrapper en tiempo de ejecución.

Gracias!!!

Responder
JMiur  

racnarok: Podrías probar algo así:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName != &quot;&quot;'>
...........
aqui deberías cambira el titulo, se trata de una página de etiquetas
y la etiqueta es el dato <data:blog.pageName/>
...........
</b:if>
</b:if>

QuéOlorTiene: Lamento el error, espero que sirva :$

Responder
Bilosony2™  

Hola y en ves de poner para que estas imagnes se muestren de manera aleatoria en en header, es posible hacer esto pero con alguna imagen del sidebar???

Responder
JMiur  

Si, es más o menos lo mismo, sólo debes cambiar el ID por el que corresponda.

Responder
Jorge Emilio Castillo  

Hola, intenté poner imagen aleatorias en el header de mi blog pero no pude, aún no me queda claro en que parte debo copiar

Si debo copiarlo como está, la verdad no entiendo. Te pido que me recomiendes alguna pagina en la q pueda cargar las imagenes, por favor ayudame.

Responder
JMiur  

Tanto el script como el CSS se colocan antes de </head> Debería ver un ejemplo para tratar de verificar si hay algún error. Las imágenes puedes alojarlas directamente en Blogger.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR