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
a las
Etiquetas:
Trucos Blog,
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
42 comentarios:
¡Gracias Rosa! Tan amable y servicial. Desde ahora tu blog es enlace fijo en los míos.
Un abrazo.
De nada, Miguel, intento ayudar en lo posible...
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 ?
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!
Que va Rosa estoy intentando pegar aqui como lo he puesto pero parece que no me deja...
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
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
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
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
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;
}
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
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
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.
nayu ¿que es lo que quieres centrar?
Genial, me ha servido de mucho, Gracias!!!
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!!!
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
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 :)
Luis si has subido la cabecera con el sistema de Blogger solo se verá esa, tienes que borrarla.
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 :*
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.
Gracias por la ayuda^^ me costo mucho trabajo que funcionara,pero al final resulto^^
Me alegro Nara!
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 ¿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
Pregunta he echo todo lo indicado y pam me salen las imagenes cortadas, cual debe de ser el fallo ?
http://otakuworldnews.blogspot.com
Gracias =)
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...
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 =)
Slade Localiza esto en la plantilla:
#header h1 {
Y justo debajo de esa línea pones esto:
visibility:hidden; display:none;
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 ?
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;
}
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/
Zero (to the left) Añade un height:250px; debajo de #header{ a ver si es eso...
Si, al final era eso, muchas gracias, me salvaste de perder la razón.
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.
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.
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
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...
no pude me podrias hacer un header vos?:$
aidee No, cielo, lo siento.
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
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
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.
Comentar con el formulario antiguo