Pages

Subscribe Twitter

13 junio 2008

Logo o Header aleatorio en blogger

Me preguntaba "therankeo" como hacer para que cada vez que entren a su blog en blogger, la imagen del header o cabecera cambie por una diferente al azar.
Esto lo puedes lograr con un simple código Javascript que debes agregar en Edicion HTML de tu blog.

Primero, si ya tienes una imagen en el header de tu blog (Elementos de pagina, cabecera, editar) debes eliminarla para que funcione este código.

En el panel, vas a Diseño > Edicion de HTML, buscas (Control + f) el tag <body> y pegas el siguiente codigo justo después:

<script type="text/javascript">
var banner= new Array()
banner[0]="http://tubanner1.jpg"
banner[1]="http://tubanner2.jpg"
banner[2]="http://tubanner3.jpg"
banner[3]="http://tubanner4.jpg"
var random=Math.round(3*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

Lo que está en azul lo reemplazas por el url de tus imágenes.
Si quieres agregar más banners, solo agrega una nueva linea y le cambias el banner[3] por banner[4] y lo mismo haces con el 3* que está en rojo por 4*

27 comentarios:

Anónimo dijo...

Muy buen blog

isaias_master dijo...

muy bueno el post, y si fuera texto aleatorio lo que quisiera que apareciera como se hace?

tecnoidummi dijo...

Copie exactamente el codigo,pero no me funciona,cuando copio el codigo me cambia las "" por " que debo hacer. Gracias
cabeto

Deathly dijo...

No importa lo que cambie... si funciona.
Seguro que lo estas pegando en Diseño > Edicion HTML > Abajo de <body>

Davids dijo...

Copie el codigo lo puse direcatamente desoues que < body > pero no me funciona, borre el header desde diseño, entonces al pegar el codigo no me aparece header, entonces lo que creo q puede ser el problema es que los url de las imagenes estan mal...cuales debo usar?..o como consigo los url?..las subi image shack pero ninguno de los codigos funciono

Deathly dijo...

En imageShack el url que debes usar es el que se llama "Direct Link", ese lo reemplazas por http://tubanner1.jpg

WOLFTATU dijo...
Este comentario ha sido eliminado por el autor.
Deathly dijo...

Blogspot es lo mismo que Blogger

WOLFTATU dijo...

cierto que tonto soy, pero disculpa lo pongo des pues de "/* Use this with templates/template-twocol.html */

body {
background-image: url(http://vicblogg.files.wordpress.com/2008/03/kurt_cobain_1.jpg);
background-attachment : fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;" blabla bla

y quito lo de headers, que sta predeterminado y ya?

WOLFTATU dijo...

SOLUCIONADO, SALUDOS! SOLO HACE FALTA LEER

Matt dijo...

Hola, muy buen blog!
Me gustaría saber como puedo usar este código para colocar texto aleatorio ya que por más que intento no lo logro, gracias :)

Bayron-Hatake dijo...

Gracias por la info , buen aporte ;)

xXHaLLoWeeN13Xx dijo...

la verdad si me funciono pero no salen las imagenes completas de tamaño por q sera solo sale una pequeña parte los banneres son de 600x200 pixeles apenas cierto??

aabiiy dijo...

quiero un codigo que me sirva para hacer las cajas invsibles
plase es urgente
lo que pasa es que tengo uno y en algunas imagenes me funcion y en otras no
espero tu respuesta mi msn par q me expliques mejor
friends_aby@hotmail.com
http://www.fotolog.com/abiiy

franciscooooooouu dijo...

como se hace para poner html aleatorio? por ejemplo un video de http://es.youtube.com/

Antonias dijo...

exelente me funciono correctamente =)

daniel cmx dijo...

vaya muy interesante, pero no he podido hacerlo funcionar, lo coloco exactamente debajo de body y no da, de cualquier forma gracias : )

Anónimo dijo...

gracias por la informacion .. la probare en la brevedad

Colombia Otaku dijo...

¿Como configuramos el ancho y largo de la imagen?

Damian dijo...

muchas gracias por el script, ammm pero tengo el mismo problema del tamaño de el banner, necesito que la altura sea de 400 px... alguna solucion??

GRACIAS!

Damian dijo...

PARA TODOS AQUELLOS QUE NECESITAN ESTE BANNER MAS ALTO.

agregar solo esta parte al script:

document.write(" height:ALTOENPIXELESpx;");

antes de:

document.write(" }");

Visiten mi blogg ;)

Julio dijo...

Grcias por el script, la verdad me costo bastante, por la complejidad de mi plantilla, pero ya esta funcionando!! pasen a verlo! http://juliopereztonini.blogspot.com

shira dijo...

pos yo os e leedo y nada lo puse primero despues de body y luego lo puse despues de body entero y nada en vista previa me sale letras y fondo gris :s decirme cual es mi fallo XD

body {
lo pongo aqi?¿
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Arial, san-serif;
font-size: 12px;
color: #e7eaeb;
background: #6d6a6b url() repeat;
o lo pongo aki?

Pสιи dijo...

Yo tengo un problema , coloco el Scrip y todo bn pero al momento de ver las imagenes se me ve a mitad alguien puede decirme como solucionar?

que se vea completo no la mitad de la imagen

De ante mano Gracias!

Pสιи dijo...

y shira

El codigo se pone

antes de

< Body >

O Despues de

Si no te funciona de ninguna de esta forma pues no se que sera .

☆Ivan Krps☆ dijo...

muchas, muchas, MUCHAS GRACIAS, NO SABES COMO ESTUBE PROBANDO FORMAS DE QUE ESTO PASARA, ESTA ES LA PRIMERA QUE ME FUNCIONA, MUCHAS GRACIAS

Inmobiliaria Dominguez dijo...

buenos dias yo quiero colocar un baner o varios ahora con esta opcion de que el titulo de cabecera sea aleatorio estoy utilizando flashvortex para crear los banner y imageShack para las direcciones pero no puedo como utilizo imageShack para que me de la direccion les agradeceria en el alma si me ayudan una asesoria para colocar nombres con un banner

Publicar un comentario en la entrada

Gracias por visitar Recursospaces, si tienes alguna duda, solo pregunta! ^^