45

Header aleatorias para el blog

Miguel me pregunta si es posible colocar distintas cabeceras con imágenes en un mismo blog.
Ya había visto algo al respecto, en realidad sabía de dos formas distintas de hacerlo, pero no las había probado hasta que Miguel me consultó al respecto :-)
De las dos, como siempre me he quedado con la que me ha parecido más sencilla a la hora de implementarla en la plantilla.

Es posible colocar distintas imágenes en la cabecera del blog de tal manera que cada vez que se acceda al blog, o se refresque la página, la imagen cambie aleatoriamente.

1- Antes de nada debemos tener las imágenes preparadas, todas del mismo tamaño que la cabecera, pues si ponemos una mayor que otra, el resultado sería un desastre óptico.

2- Las subimos a un servidor de alojamiento de archivos o al propio Blogger y guardamos sus urls (direcciones de las imágenes).

3- Si ya tenemos una imagen en la cabecera de nuestro blog, hemos de retirarla, pues sino nos "taparía" las otras. Si tenéis el título original de vuestro blog y queréis que siga mostrándose, no os preocupéis, se seguirá viendo sobre todas las imágenes aleatorias.

4- Copiamos este código en el CSS de la plantilla, ya sabéis, en la parte que hay muchas llaves como esta: }, yo lo he puesto con los otros "headers".

#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

5- Copiamos este script antes de </head> o justo después de <body> e incluso en un elemento html-javascript, he probado las tres colocaciones y funciona igualmente.


<script type="text/javascript">

var banner= new Array()

banner[0]="URL DE IMAGEN"
banner[1]="URL DE IMAGEN"
banner[2]="URL DE IMAGEN"
banner[3]="URL DE IMAGEN"
banner[4]="URL DE IMAGEN"
var random=Math.round(4*Math.random());

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

</script>

Como podéis apreciar en el ejemplo, este se compone de cinco imágenes, pero en var random=Math.round(4*Math.random());, si os fijáis el número a poner es 4, es decir, se pondrá siempre un número por debajo del total de cabeceras a mostrar, ya que la imagen cero también cuenta.

El resultado podéis verlo funcionando (con cinco imágenes) en la página del "hack" original, en esta dirección:

Visto en: Freeyasoul Adventure

Entradas Relacionadas:

45 comentarios:


Miguel Vera

¡Gracias Rosa! Tan amable y servicial. Desde ahora tu blog es enlace fijo en los míos.

Un abrazo.

Rosa

De nada, Miguel, intento ayudar en lo posible...

Calvosaez

Hola Rosa mira yo tengo un problema y esque la cabecera la tengo puesta desde un html/javascript en el otro sitio, donde se arrastran los diseños ya sabes, el caso esque me gustaria configurar en ese sitio este mismo truco, pero no lo consigo :__( me ayudas ?

Rosa

calvosaez, he probado pegando el segundo código en un elemento html-javascript en vez de en el html de la plantilla, y me ha resultado igual.
Pruebalo así a ver...
¡Suerte!

calvosaez

Que va Rosa estoy intentando pegar aqui como lo he puesto pero parece que no me deja...

Rosa

calvosaez, como ya te dije he visto que tienes la imagen sobre las entradas, y en tu plantilla no existe la cabecera, la has eliminado.
Antes de nada hay que recuperarla...
Mira en el html de tu plantilla, después de <div id='header-wrapper'> pones esto:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blog Principal (cabecera)' type='Header'/>
</b:section>

Guarda los cambios y ve a la plantilla, deberías de tener de nuevo la cabecera.

Si es así, sigue los pasos para colocar las cabeceras aleatorias.

Todos estos pasos los he hecho en un blog como el tuyo de pruebas, o sea, le quité la cabecerá y luego se la volví a poner, después añadí las aleatorias y funcionó, por cierto en tu plantilla coloca el script justo después de <body> , creo que funciona mejor.
Ah, si todo va bien, te saldrá el título encima de las cabeceras, para eliminarlo, ya sabes...
http://elescaparatederosa.blogspot.com/2007/02/eliminar-el-titulo-del-blog.html

Rosa

Calvosaez, se me olvidaba...añade el ancho de tus imagenes en #header-wrapper {

es decir: height:150px; (la mia es 150, tu pones el ancho que tengan las tuyas)

Quedará algo así:

#header-wrapper {
background: #8b2 url() bottom left repeat-x;
margin: 0 auto;
height:150px;
padding: 0 0 15px 0;
border: 0;
}

Al menos en mis pruebas si no lo ponía no se veía la cabecera.:D

calvosaez

Bueno, pero en realidad yo esque tengo mi cabecera en un elemento java, es decir, que me gustaria no tocar el html directamente, esque asi me lio menos, tengo los trucos organizados por elementos porque si toco el html directamente, luego para buscar algo me las veo, perdona si soy un poco coñazo :_D

NaYu

Hola rosa! tego u pequeño problemilla.. logro hacer que las imágenes aparexcan en mi blog, pero no completas.. es como si les "faltara espacio" para aparecer.. :S no sè si me explico...
me puedes ayudar??
Nayu

Rosa

Hola NaYu, supongo que será esto, si te entendí bien...
Añade el ancho de tus imagenes en #header-wrapper {

es decir: height:150px; (la mia es 150, tu pones el ancho que tengan las tuyas)

Quedará algo así:

#header-wrapper {
background: #8b2 url() bottom left repeat-x;
margin: 0 auto;
height:150px;
padding: 0 0 15px 0;
border: 0;
}

NaYu

xD
Creo que soy yo.. no puedo hacer q funcione! de todas formas, muchas gracias! [o quizás es la plantilla.. no es de blogger y le he hecho muchos cambios... ]
Muy buen blog, felicitaciones!

Nayu

NaYu

Lo logré!!! muchas gracias!! hice algunos cambios y funcionó [y no sé nada de HTML.. xD es que soy muy curiosa... ] muchas gracias!!
Una ultima pregunta.. sabrías como hacer para que quede centrado? [fuera de < center > porque ya probé... ]

Saludos!!

Nayu

Rosa

calvosaez, mientras no tengas header, o sea, cabecera, en el blog no puedes aplicar este truco:(
Lo que tienes es un elemento html-javascript que hace la función de header, pero que no lo es.

Rosa

nayu ¿que es lo que quieres centrar?

Alondra de Dupont

Genial, me ha servido de mucho, Gracias!!!

Rosa

Alondra, si has aplicado el truco en tu blog http://costennita.blogspot.com/, de verdad te felicito por el buen gusto de las imágenes, el resultado es espectacular.
Un saludo y gracias!!!

calvosaez

Rosa esque pense que como me sirvio eso que pusiste sobre poner textos que cambian cada vez que abres la pagina, pues pensaba que podria hacer lo mismo con una imagen, gracias de todos modos me han servido muchas cosas de tu blog, saludos

luis

es muy bueno tu blog, es el mejor y se lo agradesco rosa, pero sabes no me funciona este truco, solo se me ve la imagen que tengo como header, no las imagenes aleatorias, mmm tengo la plantilla k2 por si sirve de algo. senkiu :)

Rosa

Luis si has subido la cabecera con el sistema de Blogger solo se verá esa, tienes que borrarla.

luis

hay, muchas gracias rosa por su respuesta, nunca pense que seria tan rapida. pero solo borro la url? o como. y muchas gracias por atender a mis preguntas :*

Rosa

Luis, yo te recomendaría que probases antes de modificar nada en un elemento, por ejemplo encima de las entradas,coloca tres o cuatro imágenes de prueba para ver si el código te funciona.

De todos modos si, solo es borrar la imagen en el elemento de Blogger desde donde la subes y aplicar este código en un elemento arrastrándolo debajo de la cabecera.

Nara Notlaw

Gracias por la ayuda^^ me costo mucho trabajo que funcionara,pero al final resulto^^

Rosa

Me alegro Nara!

Seba

Hola Rosa, aca estoy molestando otra vez, te escribo una vez mas porque me parece que no viste mi mensaje (me parece)
Solo quiero saber si podes poner un link de mi blog.
Segui asi con este blog que es genial, yo como soy nuevo en este blog, ayer puse para mirar todos tus post, y mire uno por uno, estuve un monton de horas aprendiendo gracias a vos, un saludo desde Argentina.
Espero tu respuesta !! ^^

Administrador

hola he estado tratando con este truco pero no he podido jajaja

xD si me ayudaras te lo agradeceria un montonnn....xDD

ya puse el script pero creo que la plantilla no me deja hacerlo... T_T porfa ayudame...

Administrador

soy meme... xDD mi blog es..
animeseriesymanga.blogspot.com

jajaja.. se me olvido poner eso... xDDD

Rosa

Administrador ¿Has visto como se ve tu blog en Firefox?

Hay un código sobre la cabecera que creo es algo del cursor o algo así...tendrías que retirarlo...

http://img395.imageshack.us/img395/5955/nombreah2.jpg

Administrador

ahh eso..xDD jejeje :D
es que estaba probando un truco para animar los links pero no me sale...
me aparecia eso.. jajaja
pero ya lo quite...
y uso firefoxx...XDDD el mejor explorador..xDD

Slade

Pregunta he echo todo lo indicado y pam me salen las imagenes cortadas, cual debe de ser el fallo ?

http://otakuworldnews.blogspot.com

Gracias =)

Rosa

Slade O pones una imagen de la misma anchura que las otras en #header{ donde la has retirado, o ahí añades el alto del header en un height:

height: 270px;

Creo que es por eso...

Slade

Otra pregunta, ahora mismo me funciona perfecto el lo del cambio pero el titulo del blog todavia lo tengo que hago para que se me vea arriba en la ventana y no encima de la cabecera.

Gracias aticipadamente =)

Rosa

Slade Localiza esto en la plantilla:
#header h1 {

Y justo debajo de esa línea pones esto:
visibility:hidden; display:none;

Nikky Menfrey

hola de nuevo molestandote rosa, hace poco un comentario en como cambiar rotatibamente el fondo, al final lo pudelograr el problema fue que no se mantenia siendo solo una y imagen y se repetia, asi que obte por mejor modificar la cabezera asi que use un template con la cabezera bastante amplia para mis imagenes y aplique este truko ... parece que punciona porque en una hoja de practica se ve que cambia pero cuando abro mi blog se ve todo negro y no aparece la imagen ... mi header se encuentra asi

/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', Tahoma, Arial, Sans-serif;
color: #ABABAB;
}
h1 {
font-size: 3.4em;
font-weight: normal;
letter-spacing: -2px;
padding: 15px 10px 5px 10px;
}
h2 {
font-size: 2em;
color: #895F30;
padding: 20px 10px 5px 10px;
}
h3 {
font-size: 1.7em;
font-weight: normal;
padding: 20px 10px 5px 10px;
}


que debo hacer ?

Rosa

Nikky Menfrey Debes hacer lo que indico en la entrada, y la parte del header que te interesa en tu plantilla es esta:

#header {
background:#476 url(" ") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Zero (to the left)

Hola, seguí tus consejos para poder poner un header aleatorio, usando un elemento html-javascript y que el titulo del blog sea invisible, me salieron, pero me gustaría preguntarte, ¿como hacer que se vean las imágenes completas que son de 960px x 250 px?
Es decir, se ven a lo ancho, pero no el alto completo.
Bueno, muchas gracias.
http://zero-ala-izquierda.blogspot.com/

Rosa

Zero (to the left) Añade un height:250px; debajo de #header{ a ver si es eso...

Zero (to the left)

Si, al final era eso, muchas gracias, me salvaste de perder la razón.

Borest

Hola Rosa quisiera saber si se puede aplicar al titulo de la entrada del blog, un efecto que haga que al pasar el mouse cambie de color? Saludos.

Rosa

BorestClaro que si, de echo en tu blog está el código necesario, solo que el color elegido es el mismo que en la vista normal del título.
Localiza esto:
.post h3 a:hover {
color: #000;
text-decoration: none;
}
El color es #000 es decir, negro, cambia ese código por el del color que quieras ver al pasar el ratón.

Javier Rey

Hola Rosa. ¿ Hay algún modo de que la imagen aleatoria que se genera en el header sea "clickable" para te lleve al index del blog ?.

Saludos y gracias

Rosa

Javier Rey Con este script no... lo que hacen en la página del ejemplo, es mantener el título en el header para así conservar ese enlace...

aidee

no pude me podrias hacer un header vos?:$

Rosa

aidee No, cielo, lo siento.

Mar

No puedo encontrar la parte CSS (tengo pocos conocimientos de Html) pero después de que palabra va el primer codigo?
Te agradeceria que me contestes :D

Rosa

Mar Creo que queda bastante claro en el punto 4... de todos modos tus plantillas son del nuevo Diseñador y no se si en esas funcione tal como está aquí explicado... esto es para las anteriores.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S