142

Imagenes aleatorias en la cabecera (script)

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Antes de empezar lo más lógico es tener preparadas las imágenes que vamos a emplear. En este ejemplo vamos a hacerlo con tres, pero pueden añadirse más si se necesita, os aconsejo que las imágenes tengan el mismo ancho (width) que la cabecera (header) y, por supuesto, que todas ellas tengan las mismas medidas (alto y ancho).
Una vez obtenidas las imágenes necesarias, las subimos a un servicio de alojamiento (ImageShack, Photobucket, etc.) para obtener la url de cada una de ellas.

[1] Nos situamos en nuestro panel Diseño -> Edición de Html y sin expandir artilugios localizamos el widget de nuestra cabecera:
<b:widget id='Header1' locked='true' title='Titulo del Blog (cabecera)' type='Header'/>

Tendremos que borrar esa línea, con lo que nuestra cabecera anterior desparecerá, así que al ir a guardar los cambios, Blogger nos dirá que "Están a punto de suprimirse los artilugios, pinchamos en "Confirmar y guardar".

[2] Justo sobre esa línea que acabamos de eliminar, hay otra que hemos de modificar en el caso de que tengamos en ella showaddelement='no', tendremos que poner yes:
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>


[3] Vamos ahora a la parte de diseño de nuestro panel, e incluimos un nuevo elemento HTML en nuestro header, con este código en su interior:
<!-- IMAGEN ALEATORIA -->
<script language="javascript" type="text/javascript">
function randRange(lowVal,highVal) {
return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
}
</script>

<script language="javascript" type="text/javascript">
var randHdr = randRange(1,3);

if (randHdr == 1) {
document.write('<img src="URL IMAGEN 1">')
} else if (randHdr == 2) {
document.write('<img src="URL IMAGEN 2">')
} else if (randHdr == 3) {
document.write('<img src="URL IMAGEN 3">')
}
</script>
<!-- FIN DE IMAGEN ALEATORIA -->

Nota:
Para añadir más imágenes tendremos que añadir uuna línea de código para cada una de ellas, al código anterior:
else if (randHdr == 4) {
document.write('<img src="URL IMAGEN 4">')
}

En randRange(1,nºtotal de imágenes) pondremos el número total de imágenes que vamos a mostrar.

Entradas Relacionadas:

142 comentarios:


Fanso

Realmente asombroso Rosa, me encanta ^.^
¡En cuanto tenga tiempo lo pruebo!
Adiós, y gracias, una vez más!!!

Rosa

Fanso, gracias a ti!
Ay, el tiempo, el tiempo...ufff ;-)

PedroX

Este truco es muy útil para las personas que tiene varios diseños de cabeceras... Por ejemplo, yo tengo como 15 imagenes para la cebecera diferentes... Sin embargo este truco no lo utilizo, ya que solo quiero mostrar una... Pero la primera vez que lo vi (no me acuerdo en que web), lo utilicé en mi blog preferido xD.. pero despues de algun tiempo terminé quitándolo porque no me gustó mucho!!

Pero es muy muy bueno!!

Saludos Rosa!

Ika

Hola Rosa:
Estoy segura que me puedes solucionar una duda.
¿se puede ver la evolucion de los comentarios de los blogs desde el reader de google, o es necesario ir al correo hotmail?
En caso de que sea posible, por favor dime como lo tendría que hacer.
(no olvides lo patosa que soy con el ordenador...)

Rosa

Ika, supongo que te refieres a seguir tu misma los comentarios en tu blog.
Si es así, puedes hacerlo en Configuración-Comentarios-Correo electrónico de notificación de comentarios, te llegará cada nuevo comentario a tu dirección de email.

También puedes suscribirte tu misma a los comentarios de tu blog y leerlos en Google Reader, para hacerlo pincha en el título de una de tus entradas (que tenga comentarios) y allí verás el "suscribirte a comentarios".

Ligia

Rossy:

Me gusta esta tutoria...la estaba esperando desde que comentaste a Carlos que ibas a publicarla, ya que la tenias en borrador.

Voy a buscar las imagenes necesarias y trataré de colocar el recurso en mi blog.

Gracias por la claridad con que la redactaste.

Lia.

Rosa

Ligia, de nada, gracias a ti;-)
Acuérdate de usar imagenes de igual medida...sino quedará fatal.

Juanjo

Wenas Rosa, nada sólo decirte que este truco me va a venir muy bien para cuando tenga tiempo ya que tenía tres o cuatro cabezeras y bueno ahora me toca probar cómo quedan de forma aleatoria jeje.
Por cierto me he atrevido a piretear haciendole referencia a Yo misma una entrada que me a gustado mucho "el POPBOX" pasa a hecharle un vistazo:
Imagenes con POPBOX
(asi te quito algo de trabajillo) por ser tan incordio por tu querido blog juas juas... En el buen sentido.

Un saludo!

Rosa

Juanjo, está muy bien!

Me he fijado en la etiqueta "el truco del almendruco" ¡Ingenioso! :D

Bet del Mar

Rosa!! me encantó este recurso... muy bueno... casualmente tengo varias imágenes para Instantes Eternos y me gustan todas...ahora tengo la solución!! besos!! y gracias!!
;-)
Ah!! ya que estoy por aquí, te hago una consulta. He probado varios javascrip en blogger y ninguno me funciona, cuando quiero guardar blogger no me acepta los códigos, por ejemplo es el caso del recurso del cursor con imágenes que se mueve, bueno, no se si esto es por incompatibilidad de blogger con este tipo de recursos que si funcionan en paginas web, sabrías si es así??
Besitos!! nos estamos escribiendo:
BeT

Rosa

Bet del mar, si, así es, se debe a los códigos internos de las plantilla en Blogger. Esos scripts que comentas por ejemplo, yo no he sido capaz de hacerlos funcionar en Blogger, solo uno que son letras que persiguen al cursor y en algunos blogs también va mal...

Un beso. :-L

Surplus21

Gracias Rosita como siempre traendonos novedades =D se agradece =D

Dreds

hola rosa no se si aparecio mi otro mensaje lo que pasa es que ya no lo vi

queria saber como poner esto en google que aprescan esos links abajo aqui esta una imagen a lo que me refiero del titulo del blog

http://img261.imageshack.us/img261/9647/imagenescaparatetq8.jpg

gracias

Soliradidad

Hola Rosa perdona la ultima ves que te consulte me refería a eliminar la suscripciones de entradas atom,sin afectar el feed de rss la cual no aparece de igual forma en mi plantilla aun así busco algún código parecido y no me funciona igual que lo explicas , es decir hago los pasos indicados y no funciona , que estoy haciendo mal.
lo otros lo de la cabecera aleatoria para el blog cuando hablas de suprimir artilugios a que artilugios te refieres , me preocupa porque no se si estamos hablando de todos.

Jony

De antemano -Muchas gracias por tu trabajo en ayuda de los que menos sabemos.- Me he quedado realmente sorprendido que hayas hecho una página de GRAN AYUDA amiga rosa.

Tengo un asuntillo-:
¿como podría quitar la B de blogger en la página.
-me refiero al logo que sale en la dirección:--B--http:nipagina.com

Rosa

Jony, por tus palabras me ha dado la impresión de que me conoces de algo, ¿es así?siento curiosidad, la verdad se dicha. :-X

Para encontrar lo que buscas mira en esta entrada

Rosa

Soliradidad, puedes quitar sin problemas el suscribirse a entradas, ya que has incluido el feed desde Feedburner para usar en el blog y el de entradas es el que viene en Blogger por defecto...

En cuanto a "eliminar artilugios" se refiere ala cabecera antigua que tengamos, no a todos ni mucho menos.

Rosa

surplus21, gracias a ti! ;-)

Rosa

Dres, pues contestar, te contesté, aunque he tardado en encontrar donde...:-X
Cuando comentes la próxima vez marca la opción de seguir el comentario y así no problem. :D

La respuesta esta aquí

Ika

hola, soy la pesada de Ika.
Tengo un monton de preguntas, pero dte las iré dosificando, no quiero agotarte...
Me gustaria poner el el blog esos iconos chiquititos que quedan como a media página, a la izquierda, donde está lo de subir arriba y otras cositas prácticas.
espero que no sea dificil hacerlo...

Tambien me gustaría poner mi firma a la derecha, al final del post, son de izquierdas, pero mira que para eso, prefiero la derecha, a la izquierda me parece demasiado egocentrico (...)

Y algo que dejo para otro día y que nunca entenderé es lo del Feed y lo del Rss.
Ese es otro tema.

PedroX

Rosa, tengo un problema que me está volviendo loco!!
Te Cuento:

Yo coloqué hace algun tiempo, un menú del Blog de Cesar que me gustó mucho, y lo puse en mi blog, y siempre me ha funcionado bién...

Pero ayer cuando entré al blog, estaba todo desordenado, osea no era el menú, sino solo el texto y lo que estaba en el menú, entonces entro a edicion de HTML y veo que al codigo le falta < /div>, entonces se lo coloco y listo, estuvo todo el día bien..

Hoy llego del colegio y cuando entro al blog, OTRA VEZ TODO SIN EL MENU.. y VUELVO A ENTRAR PA VER EL CODIGO, y veo LO MISMO, no tenía el < /div>... se lo coloqué y ahora está bien, pero mi preocupación es ¿SERA QUE ESO SE BORRA SOLO?, ¿QUE ES LO QUE PASA? ¡AYUDA!

Aqui tienes el Link del Menu en el Blog de Cesar, para que veas de lo que te hablo:
http://webjcp.blogspot.com/2007/11/c-omo-vern-arriba-que-muestro-un-mapa.html

Rosa

Pedrox, pues chico, ni idea de porque pasa eso...el código va en un elemento así que no tendría que dar ningún problema y el script no me parece tampoco que sea el problema...así que ni idea...lo siento. :-X

Rosa

Ika, pues si te he entendido bien lo que quieres, todo está en mi blog, solo hay que buscar un poco...

Menu flotante

Firma para tus posts

Que es el RSS

PedroX

Rosa, me he fijado que a veces funciona y a veces no, y así no me sirve, no sabes de otro menú que funcione como ese???

Saludos Rosa!!

ika

lo intentaré.
Te prometo que lo habia buscado.
Mil gracias.
No te molesto más.
Y por supuesto te invito a un café.

Carlos Rodriguez Ibañez

Gracias Rosa por este post. Me alegra que a la misma vez le esté sirviendo a much@s compañer@s.

Besos!!

(Ahora me queda buscar las imágenes..)

Gracias!

Rosa

Pedrox, supongo que el problema no es del menú en si, sino que el script que usa para funcionar se "hace un lío" con algún otro, eso me pasó a mi con uno precioso despegable que puse casi al estreno del blog...Ahora mismo no se que decirte sobre otro parecido ya que el script sería el mismo o prácticamente igual...¿porque no intentas probar alguno solo con CSS? arriba en Menús hay varios...

Rosa

Ika, espero que no te haya sentado mal mi respuesta, te digo de verdad que no era mi intención.
Puedes pasarte cuando quieras y preguntar lo que quieras, solo has de entender que tengo muchísimas consultas y cuando preguntáis cosas que ya están publicadas, a mi también me lleva un ratillo encontrarlas...

Un abrazo!

Rosa

Carlos, claro que si, siempre viene bien a alguien más cualquier información.

¡Abrazos!

ika

¿como quieres que me moleste con todo lo que me ayudas?
ni se me ocurre.
Espero ir mejorando dia a dia

Ika

Rosa, te cuento esto, solo para que veas como son mis conocimientos...
Me pongo con todas las ganas y lo primero que leo es:
En primer lugar añadirmos en elCSS de nuestsra plantilla..
Bueno pues ni sé lo que es, ni se donde está!
no lo encuentro.
Lo dejo definitivamente.
no te preocupes y gracias.

Rosa

Ika, que vas a dejarlo niña :-L

Te explico:
Te sitúas en tu panel, y en "edicion de HTML" verás que está todo el código de tu plantilla. El CSS es dentro de ese código, lo que está entre <b:skin><![CDATA[/* y ]]></b:skin> y como siempre recomiendo, para evitar problemas, cuando digo: añadimos en el CSS de nuestsra plantilla, pues lo hacemos tranquilamente justo antes de ]]></b:skin> y así estamos seguros de no equivocar el lugar...:D

Ligia

Rosa:

Pasa a visitarme, por favor, para que veas la entrada Mayo 15, 2008.

Tu fan número 1.

Bidolski & Partners

Hola Rosa

Cada vez que dejo un mensaje luego me es imposible volver a localizarlo. Mi ignoracia es total en esto. Te había preguntado sobre como había que poner un código cuando decía en vez de antes o despues "sobre" si mal no me acuerdo lo puse antes de ayer, pero no esta mas´.

Como tengo que hacer?
Muchas gracias rosa
Daniel

Rosa

Bidolski & Partners, pues no lo he visto, ni me ha llegado al email y lo tengo configurado para que me lleguen loscomentarios...pero cuando digo "sobre" es lo mismo que decir "antes" o "justo encima".

SR. HISPANO

Excelente trucos Rosa: gracias a vos mi BLOG esta cada vez mejor y la gente lo recibe muy bien (www.hispanofc.net)
Te queria hacer 2 consultas.
1)- Como hacer para que no quede un espacion entre la imagen del titulo del blog y el borde de la pantalla? Asi como tenes vos. Yo oculte la NAVBAR pero me queda un espacio que no me agrada.
2)- Como se puede insertar: LEER COMENTARIO, asi como tenes vos? Esta muy bueno y me gustaria aplicarlo.
MIL GRACIAS Y SOS LA GURU DE LOS BLOG!!

SR. HISPANO

Excelente trucos Rosa: gracias a vos mi BLOG esta cada vez mejor y la gente lo recibe muy bien (www.hispanofc.net)
Te queria hacer 2 consultas.
1)- Como hacer para que no quede un espacion entre la imagen del titulo del blog y el borde de la pantalla? Asi como tenes vos. Yo oculte la NAVBAR pero me queda un espacio que no me agrada.
2)- Como se puede insertar: LEER COMENTARIO, asi como tenes vos? Esta muy bueno y me gustaria aplicarlo.
MIL GRACIAS Y SOS LA GURU DE LOS BLOG!!

Rosa

SR. HISPANO, tu tienes la navbar de forma que se ve oculta pero al pasar el mouse aparece, así que no se si te quedaría demasiado bien el reducir ese espacio... No obstante si quieres hacerlo ve a tu plantilla y localiza esto:

#header-wrapper{

añade debajo esta línea:

margin-top:2px

Lo que dices de LEER COMENTARIO supongo que será LEER COMUNICADO, si es así, puedes ver como hacerlo aquí, y si quieres ponerle color, en un comentario de esa entrada, está explicado.

angitawbm

hola rosa, primero que nada darte las gracias por compartir todos tus conocimientos con nosotros, bueno te queria pedir ayuda, verás, estaba hace mucho tiempo con que queria cambiar mi cabecera para que cambiara cada vez que se actualice el blog, y por fin encuentro la forma de como hacerlo aqui, muchas gracias, pero mi problema es que me sale un cuadro blanco abajo, y siempre me pasa eso cuando agrego algo fuera de las sidebars, no se si me podrías ayudar con este problema

aqui te dejo mi blog para que puedas ver a que me refiero http://angitawbmxd.blogspot.com

por favor ayudame!!! bye!!!

francis (Bollullos)

Estimada "maestra" llevo ya bastante tiempo sin modificar mi blog y he decidido hacer algunos cambios. Para empezar, quiero cambiar la plantilla, voy a instalar la Blue Blog, de Kailoon y Zona Cerebral. A esta plantilla, le viene muy bien el cambio de imágenes aleatorias en la cabecera. El problema es que he intentando seguir tus pasos y no lo consigo. No encuentro lo que dices en esa plantilla. A ver si me puedes ayudar. Un saludo y abrazos.

Rosa

francis, esa plantilla no es original de Blogger, sino una adaptación y es por eso la no-coincidencia de códigos.

En esa plantilla la cabecera está directamente incluida en el html de la plantilla, y es una imagen de una sola pieza que incluye la parte azul donde va el título, la negra de la descripción y la polaroid, para que me entiendas mejor, pega esto en el navegador y verás la cabecera de esa plantilla:
http://img360.imageshack.us/img360/1540/headerud0.png

No creo que sea una buena idea usar imágenes aleatorias...de todos modos cualquier cosa relativa a la plantilla podrías preguntar en zona cerebral, si la ha adaptado sabrá mejor que yo como interpretar su código.

francis (Bollullos)

Ok, Rosa. Muchas gracias.

Sandra...

Rosa he descubierto este espacio y estoy muy contenta, es impresionante todo lo que nos brindás a los que no sabemos nada (o poco) para arreglar nuestros blogs!
Quería consultarte sobre mi encabezado: he colocado una imagen en movimiento y resulta que ahora la quiero sacar y no puedo!! Aunque le doy "eliminar imagen" no me lo acepta y eso nunca me había pasado; tienes idea de qué puedo hacer al respecto???
Desde ya, muchísimas gracias!!!
por si quieres ver mi blog es
www.elatelierdesandra.blogspot.com

Rosa

Sandra... , veo que tu imagen está subida a la cabecera mediante Blogger, así que debería eliminarse al hacer lo que dices...podría deberse a un fallo momentáneo de Blogger, tal como sucede cuando no nos deja subir las imágenes. Espera un tiempo prudencial y vuelve a intentarlo, sino funciona miraré de que intentes quitarla "a mano" desde el código de la plantilla.

Sandra...

Gracias Rosa, sos un sol!! Iré probando día a día de quitarlo y si no va, entonces volveré para pedirte ayuda con eso que me dices de "quitarlo a mano" (yo ni idea al respecto!)
Te mando un abrazoooote y GRACIAS DE NUEVO!!!!!!!!

Rosa

Sandra..., pues muy bien, eso haremos, la parte de "a mano" no es muy complicada, pero bueno, mejor asegurarse por si algo te saliese mal...

JESY2474

Hola Rosa, quería agradecerte por el código, el cual me funcionó de maravilla, gracias por ser asi ten especial al ayudarnos siempre con tus ideas. Saludos y que pases una linda semana.

Rosa

JESY2474, te ha quedado precioso,como el resto del blog, la verdad que me gusta muchísimo como has conseguido dejarlo. :-L

JESY2474

Muchas gracias Rosa por tus palabras, y la verdad no lo habría conseguido sino fuera por toda tu ayuda.
Viera que noto que ya no se puede dar click en la imagen de la cabecera...
Se puede hacer eso? es decir, antes le daba click en la imagen de la cabecera y me llevaba a la pagina principal...?
De nuevo muchas gracias Rosa.

Rosa

JESY2474, al aplicar este script el enlace se pierde...

Sandra...

Hola Rosa!! Espero que hayas comenzado muy bien tu semana!
Quería pedirte que cuando tuvieras algo de tiempo (y ganas por supuesto!) me ayudaras a quitar "a mano" al angelito que tengo instalado en mi cabecera y que no puedo sacar por más que le doy "eliminar imagen"... no quiere saber nada en irse de allí!
Te agradeceré muchísimo tu valiosa ayuda.
Un beso!

Rosa

Sandra... vamos a intentarlo.
Ve al panel de tu blog "edición html" y sin expandir artilugios localiza esto:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mi Atelier.. (cabecera)' type='Header'/>
</b:section>
</div>

FIJATE BIEN DONDE ESTÁ COLOCADO PUES LUEGO NECESITARÁS VOLVER A PONERLO EN EL MISMO LUGAR.

Copialo todo y pegalo en el blog de notas para más seguridad. Luego elimina el original de la plantilla y guarda los cambios.
Te saldrá un mensaje como este:

Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

* Header1

Acepta. Ahora tu blog no tiene cabecera.
Ve de nuevo al mismo lugar y copia lo que borraste antes y que has guardado en el blog de notas.
Ahora deberías haber recuperado tu cabecera sin la imagen...

Sandra...

Gracias amiga!!!! No sabes lo que te agradezco la molestia que te tomàs en ayudarme!
Me sentarè tranquila a hacer todo lo que me indicas y en cuanto lo tenga, vengo y te aviso :-)
GRACIASSSSSSSSSS DE NUEVO!!!!!
Un beso grande para vos!

Pamen

Pues gracias, pero ya no hace falta, porque ya lo arreglé renovando la plantilla. Un saludo y me seguiré pasando por tu blog.

Rosa

Pamen ¿qué arreglaste? :-X

René

Hola Rosa :) te felicito por el blog y te doy gracias por todos los aportes que haces :) sirven de mucho a muchas personas :)
quisiera consultar algo...
yo use el codigo para las imagenes aleatorias pero no me funciona :( he hecho todo exactamente como lo dice alli pero no me deja guardar el elemento javascript :( que podria hacer? :(

René

jajajajajajaja olvida mi ultimo comentario jajaja
nose que le pasaba a mi blog, ahora ya me funciona :D:D:D gracias por el script!!!!! :) me gusta mucho :)
te agradesco

Rosa

René , pues me alegro mucho, je,je.

Agus

Hola Rosa, como hago para hacer que los banners de la columna lateral (esos que llevan a otros blogs o paginas) se muevan, digamos de abajo hacia arriba? esto para que se muestren en una ventana más pequeña.
Muchas gracias por compartir tus conocimientos con todos nosotros.

Rosa

Agus, pudiera ser que te sirviera esto:

http://elescaparatederosa.blogspot.com/2007/03/link-con-texto-o-imagenes-en-movimiento.html

Agus

Una vez mas gracias Rosa, tenias razon, esto era lo que necesitaba jjiji.
Mil gracias de nuevo :)

acne

Hola, es justo lo que estaba buscando este script! en seguida lo probare y cualquier cosa te aviso como me ha quedado!
Aprovecho tambien para hacerte una consulta, ya que veo que esto se hace con javascript...las pocas veces que he añadido alguna funcion con javascript en alguna pagina, he tenido problemas para visualizarlas con distintos navegadores.. es decir..generalmente puedo ver bien lo que he hecho con internet explorer, pero muchas veces con mozilla nunca veo la funcion que he agregado...sabes como puedo modificar esto?

Rosa

acne, habitualmente suelo probar en los dos navegadores mas usados (IE y Firefox) antes de publicar cualquier código...ambos en sus últimas versiones, eso si, así que este script debería funcionar sin problemas...

Adri-T

Hola rosa, solo queria decirte que no me funciono la cabecera aleatoria :( busque mas por google y ninguno me funciona, necesito tu ayuda, te agrego al msn.

Rosa

Adri-T, más de uno lo está usando sin problemas...revisa tranquilamente los pasos que has seguido.
En cuanto a lo del msn, lo siento, pero no lo uso de forma "normal" solo para recibir email.

zake_ajl

¿como se podria hacer para que cada página de etiquetas tuviera una imagen fija? es decir, que la imagen a mostrar en cada página estuviera elegida de antemano.

GRACIAS por el post

Rosa

zake_ajl, siento decirte que, al menos de momento, no tengo idea de como podría hacerse eso...

zake_ajl

hubiera estado bien jejej.... gracias de todos modos

botox

muy buena la expicacion, muy clara y muy completa!!
gracias!

FrAn

Buenas noches Rosa, soy un bloggero reciente. He descubierto tu espacio navegando esta tarde. Pero dentro de tu página no veo lo que busco. Y es que necesito poner una imágen en la cabecera distinta para cada sección; es decir, que cada vez que se haga clic en una sección o etiqueta la cabecera muestre una imagen diferente, que evidentemente enlazaré desde un servidor y estará relacionada con el tema de la etiqueta.

Encontré este post tuyo, que es parecido es parecido a lo que yo quiero hacer, pero no es lo que necesito exactamente. Así que si ya tienes posteado algo sobre lo que yo te pido, te agradecería que me lo indicases. Si no, ¿podrías ayudarme sobre ello?.

Como curiosidad, te comento que un amigo tiene un blog y lo que hace es enlazar cada pestaña a blogs distintos. Así, en realidad no tiene un blog sino 4 o 5, uno por cada pestaña; y esto es algo pesado, jeje.

Un abrazo,

Fran.
http://franpalaciosgarcia.blogspot.com/

Rosa

FrAn , así es, se viene haciendo como lo tiene tu amigo pues hasta el momento y que yo sepa, no puede hacerse de otra manera...aunque he estado haciendo alguna prueba sobre el tema con un script que podría servir...de momento, y aunque creo que si podría ser algo factible, no he conseguido gran cosa...

Cm_Blast

Muchas gracias. Quería poner para que cada vez que se cargue la página me saliera una imagen distinta y que además esté colocada como cabecera y me sirvió lo tuyo.

Así que, gracias.

Alondra

Ayyy estoy bien contenta de haberme encontrado tu blog Rosa hace tiempo!! gracias a ti he podido hacer muchas cositas en mi blog, ahora le he puesto la cabecera aleatoria, en serio te agradezco muchísimo todo lo que haces por nosotros los que no sabemos mucho de esto, las explicaciones son tan claras y eso es bien importante para poder hacer todo bien... GRACIAS!!!! TE MANDO UN ABRAZO Y UN BESO...

Rosa

Alondra , lo he visto y está precioso. Tienes buen gusto!!:o

Alondra

Gracias Rosa! :D

Toto

Hola Rosa! Como estas? espero que bien! ;)

Queria consultarte algo con respecto al tema tratado en esta entrada.

Yo ya habia probado esto en la anterior plantilla que tenia, pero ahora cambie por una plantilla ya diseñada, y probando el codigo me cambiaba mucho el aspecto (las imagenes aparecian muy arriba y no cambiaban la imagen ya prediseñada)
Queria saber si puedo realizar este "truquillo" en mi nueva plantilla correctamente...
No se que datos necesitas para poder asesorarme.
Espero que me hayas entendido, desde ya muchas gracias!!
:-)

Rosa

Toto, pues el sistema es el mismo, solo que la imagen de la cabecera actual está incluida en la plantilla, aquí:
#header-wrapper {
position: relative;
background: #fff url(http://2.bp.blogspot.com/_73i0fjAB_Hw/SLj8yCcrgMI/AAAAAAAAAMA/HGTdRyn-mzY/s1600/header-bg.jpg) repeat-x;
width: 870px;
height: 100px;
padding: 0;
margin: 0px auto;
}
Tendrás que borrar ahí su url para que no se siga viendo.
Luego si las imágenes no se adaptan exactamente, imagino que habrá que modificar ahí mismo los valores de padding y margin...

Mika_y12

Hola, soy amal tengo un blog y no entiendo muy bien lo de los codigos...
Me gustaria mucho que me agregaras y a lo mejor me ayudas!^^
Aqui te dejo mi msn Rosa, amal.1996@hotmail.com

Guillermo

Cuando pongo el codigo me sale:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag "".

Porque me sale eso?

Rosa

Guillermo El código de las imágenes hay que cerrarlo con la barrita /

<img src="url de imagen"/>

Guillermo

Muchas gracias :) , pero tengo otro ploblema :( , la imgenen se me quedo asi mira mi pagina:

http://narutocapitulosonline.blogspot.com

La imagen se va a la derecha. Por favor ayudame.

Rosa

Guillermo La imagen está bien, lo que está hacia la derecha es todo el blog y en eso no ha tenido nada que ver el cambio del header.

Localiza esto en el código de la plantilla:

/* Page */
#page {
width: 890px;
margin: 0 auto;
padding: 15px 0;
}

Borra la línea que dice: padding: 15px 0; usa la vista previa a ver que tal.

claupia

Hola Rosa, hasta ahora he utilizado un montón de tus trucos en mi blog y quedaron super, ya que sos muy clara para explicar, pero ahora estoy armando otro blog y quiero utilizar esto de las imagenes aleatorias y como no entiendo mucho sobre los códigos te quiero preguntar algo del Punto3 ya que todo lo anterior lo entiendo perfecto. Me podrías indicar en que parte de la plantilla debo colocar exactamente todos los códigos que indicas en el punto3? Tu dices que se debe colocar un nuevo elemento HTML en nuestro header, donde es eso exactamente? Perdona mi ignorancia pero es que yo de códigos entiendo muy poco, te diria que casi nada.
Espero tu ayuda y te agradezco desde ya.
Besos, claupia

claupia

Hola Rosa, yo otra vez. Pero ahora para decirte la dirección de mis blog para que los conozcas y me diagas que te parecen y de paso agradecerte toda tu ayuda.
El más viejo es http://claupia-milugar.blogspot.com y el que estoy armando es http://claupia-viajesparacompartir.blogspot.com
Gracias otra vez y saludos.

Rosa

claupia Un nuevo elemento HTML, pues es sencillamente eso, un gadget que añades desde la parte de diseño en donde sea. Luego, una vez colocado el código en el gadget, lo arrastras a debajo de header o cabecera del blog.

Rosa

claupia En cuanto a opinar de otros blogs, no me gusta hacerlo la verdad, considero que nuestro blog es como nuestra casa y cada uno la tiene como mejor le parece para disfrutarla...claro está, a no ser que vea una cosa que esté mal o impida funcionar correctamente el blog...
Están bien los dos, usan unas plantillas sencillas pero resultonas, ten cuidado con abusar de gadget inútiles, como relojitos y calendarios...solo hacen que retrasar la carga óptima del blog.

claupia

Gracias Rosa por tu ayuda y consejos, los tendré en cuanta.
Ahora voy a ponerme ha realizar lo de las imagenes y espero que me salga bien, cualquier cosa te volveré a molestar con mis consultas.
Gracias otra vez y besitos.

Airena

hola Rosa puse las imagenes hace tiempo pero s ahora cuando no se ven,ni con firefox ni con intedrne explore tu sabes que le pasa, mucha gracias

NOSOTRAS

Airena no te lo ha dicho pero es el blog de fila nosotras gracias rosa

Rosa

NOSOTRAS y Aiena Antes funcionaría, pero porque no estaríais usando las mismas imágenes y si son las mismas las habéis cambiado de alojamiento, porque sus urls no son correctas...cuando algún truco que use url de imágenes no funcione, lo primero es comprobar que las url son correctas...en vuetro caso no lo son, si las copio y las pego en el navegador, voy a esta página de error:
https://dl-web.getdropbox.com/get/Photos/CABECERA/ENTRAETA.jpg?w=0c84b7c2

Mirar a ver en el alojamiento cual es la url que hay que usa...el link directo.

BASSICO ARQUITECTURA

Hola Rosa

Una chica Argentina (Cecilia GM) me ha recomendado con tu blog y tengo las siguientes dudas.

1- No se que estoy haciendo mal pero no he podido lograr el efecto de imagenes aleatorias en el header.

2- Este mismo efecto se puede lograr para la imagen de fondo??

3- He logrado proteger las imagenes para que no las guarden o descarguen, pero al darle click y amplair la imagen sola en la pagina, alli si se deja guardar. Es posible evitar que descarguen esta tambien, o de alguna forma evitar que las imagenes se amplien a su tamaño original??

Gracias. Mi nombre es Jorge. Saludos desde Medellin

Rosa

BASSICO No puedo decirte que estás haciendo mal si no veo los códigos para el efecto colocados en el blog...
No obstante, ha menudo suele ser problema de la url de las imágenes que no se usa la adecuada...te lo digo como orientación, no quiere decir que en tu caso sea eso...

No puede usarse para el fondo del blog, pero aunque se pudiera, no es recomendable en absoluto aplicar ese tipo de efectos en el fondo.
Aunque siempre depende del tipo de blog claro, pero lo recomendable es tratar de no usar nada con demasiados cambios ni imágenes en movimiento.
Aunque yo publique a veces cosas del estilo, lo hago porque así me lo solicitan algunas personas, aunque no siempre estoy de acuerdo en el uso de esos efectos...

En cuanto a lo de las imágenes, no podemos evitarlo, es Blogger quien controla eso.
Lo que si puede hacerse es retirarle el link para que no se abran a tamaño grande...

CV

Hola rosa si funciona pero tengo un problema como hago para que no le coloque el fondo que uso generalmente en los gadget de la barra lateral!
Ve como quedó

Rosa

CV Mira a ver si sirve así...
Localiza esto en tu plantilla:
/*-- (Cabecera) --*/
#header-wrapper {
height: 120px;
}
Y cámbialo así:
/*-- (Cabecera) --*/
#header-wrapper {
height: 120px;
background: none;
}

CV

Rayos no funcionó! Rosa habrá una forma de desactivar el background a ese widget especifico solamente? algo parecido a ese código que me diste pero la cuestión es que en ese que me das solo afecta al header y recuerda que en este caso ya deja de ser el header para ser un widget tipo HTML mas con la diferencia que lo ubico en la posición donde estaba el header.


Ve como quedó


Mira mi planilla Actual!

Agradezco tu ayuda! Gracias

Rosa

CVPerdón, perdón, perdón... no se en que estaría yo pensando :S


Sin expandir la plantilla de artilugios localizamos el código que pertenece a los widget y que, estará representado cada uno, por una línea parecida a esta:

<b:widget id='HTML5' locked='false' title='Lo que sea' type='HTML'/>

Nos fijamos en la línea del widget concreto al que vamos a añadir el borde.
Una vez localizada la línea, nos fijamos en su id que es siempre distinta para cada widget y la apuntamos o copiamos con el ratón.
En el caso de mi ejemplo, el id del widget es HTML5porque creo que también es el de la nueva cabecera, pero asegúrate.

Nos situamos ahora más arriba, en el código CSS de la plantilla y siempre antes de ]]></b:skin> colocamos el código necesario para hacer desaparecer el fondo del widget:

#HTML5{
background: none;
}

En tu caso tenemos que eliminar tambien la imagen que va en el título, así que debajo de lo anterior, añades:
#HTML5 h2{
background: none;
}

Cualquier cosa, me dices...

CV

No Rosa! no me funciono. Podrías conectarte por messenger e intentarlo con otra cosa!

Rosa

CV No agrego a nadie al msn, uso hotmail para leer el correo porque así contesto a las consultas al mismo tiempo que hablo con algún familiar... no tengo a nadie fuera de la familia en el msn.

Tu plantilla tiene un diseño un tanto "raro" por no decir erróneo...

De todos modos me despistó bastante cuando vi que el widget está añadido en la sección del crosscol...

Localiza esto en la plantilla:

.widget-content {
background:transparent url(http://lh5.ggpht.com/_VPRUNAFRwJA/SfkogIO7_cI/AAAAAAAACT8/gtRfQMm8jNg/sidebar-pirate-down.gif) repeat-y bottom left;
margin:0pt;
overflow:hidden;
padding:5px 10px 9px;
}

La primera línea de ese código, es decir:
.widget-content {

La cambias por:
#sidebar .widget-content {

Luego por ejemplo encima de esa línea, colocas esto:

.crosscol .widget-content{background: none;}

CV

Felicitaciones Rosa lo lograste! Gracias sinceramente! en cuanto a la planilla, en verdad es algo confusa y errónea como dices, pero si una la analiza bien como tu lo hiciste siempre le encuentra el detalle. la planilla original se llama iPlantilla yo le he editado hasta convertirla como yo la llamo "Pirate" como un tema para WindowBlinds porque tiene algunos detalles parecidos.

Rosa

CV La próxima vez me esperaré a estar en casa para contestar :S
No podía cargarla en un blog de pruebas como suelo hacer y contesté según la lógica o mejor dicho, según el diseño de un template Blogger...
Perdona las vueltas.

CV

Entonces tienes mucho mas mérito! en verdad gracias ese script lo quería aplicar desde hace tiempo! disculpa lo de pedirte hablar por messenger pensé que tardarías en resolverlo. Saludos y cuídate.

master

y no se podria poner una imagen de cabecera ,para cada seccion del blog???

Rosa

master Pues a decir verdad, creo que si se podría, aunque requeriría controlar bien el manejo de las condicionales y códigos de Blogger.
Nunca me he planteado el tema, ni he tratado de hacer algo así, pero voy a mirarlo en cuanto pueda.

master

La verdad es que se me hace algo muy interesante ese efecto.
Indagaré yo también sobre el tema, haber si consigo algo.

El h@Cker De la vel@

hola rosa me gustaria saber o entender mas cobre como colocar las imagenes de la cabecera aleatoria que no te entendi muy bien sobre incluir un nuevo elemento HTML en nuestro header, con este código en su interior:
y disculpa pero no se mucho sobre html me gustari q dieras un poco mas de ejemplo sobre eso please gracias

Rosa

El h@Cker De la vel@ Si no entiendes eso, te recomiendo qu practiques antes con el manejo del blog y empices por trucos más sencillos... en primer lugar trata de no usar plantillas complicadas como las que veo en tus blogs de pruebas.

...:::Karen:::...

Muchas gracias, voy a subir las imagenes y luego lo pondre en mi blog..

Lolo

Hola, me sale todo bien, pero tengo un pequeño menú en la cabecera, para señalar el INICIO, el RSS y eso, y se queda arriba...

Lo podeis ver en http://cordobatierrajudia.blogspot.com/

¿Que puedo hacer?
Un saludo.

Rosa

Lolo Se queda arriba... y cual es el problema, ¿no lo quiero arriba, lo quiero en...? ¿Quiero quitarlo...?
Explícame algo porque sino lo que veo es un blog con un menú superior...

Yaumita

Hola, Rosa.
Al sustituir el widget de la cabecera por este otro con imágenes aleatorias, se ha perdido el enlace a la página principal. ¿Alguna idea para añadirlo? He intentado mil maneras, pero no lo consigo.
Gracias y enhorabuena por tu blog.

Rosa

Yaumita Añade el enlace a las imágenes en el código (en cada una de ellas):

if (randHdr == 1) {
document.write('<a href="http://TUBLOG.blogspot.com"><img src="http://img3.imageshack.us/img3/5739/newspaperfeedadd512x512zl6.gif"></a>')

started

hay alguna foto de como qedaria el resultado..pera saber si es lo que yo busco o no...

Rosa

started Pues no... hay bastantes blog que lo usan, pero ahora mismo no recuerdo ninguno, lo siento... ¿porque no usas un blog de pruebas?

JoanG

Hola Rosa,
He estado intentando cambiar mi imagen de cabecera por unas cuantas que he creado ahora que tengo buenas fotos y no lo consigo.
Lo que pasa es que yo ya he cambiado la cabecera por una imagen y no me funciona lo de añadir scripts porque ya la he liado mucho con la configuración de la plantilla :P
¿Hay alguna manera de incorporar el script dentro de la plantilla por ejemplo? O sea poder cambiar la declaración de la imagen de fondo de mi sección #header.
Sé que es una pregunta bastante rara, pero realmente si lo consigues serás mi ídola para siempre jeje

La dirección de mi blog es: http://frompomatoapple.blogspot.com

Muchas gracias

Rosa

JoanG No entendí prácticamente nada de lo que tratas de decirme...
Si lo que quieres es que en el header se muestren las imágenes cambiantes, esta es la entrada, y el script SI va en la plantilla, mejor aún, en un gadget...

JoanG

Hola Rosa,
Lo que pasa es que mi imagen de cabecera no la tengo dentro de la sección que debería sino como un añadido. O sea, tengo un cuadrado cuyo fondo es una imagen y en esa "sección" no puedo añadir gadgets. Simplemente quería saber si era posible introducir el código directamente en el HTML general para cambiar ese fondo, pero sé que es complicado.
La verdad es que sé que me he explicado muy mal, pero no sé cómo hacerlo sin tener el código delante.
Muchas gracias igualmente

Rosa

JoanG Si se trata de cambiar la imagen que actualmente tienes en el header por otra nueva, es sencillo, en esta parte del código:

#header {
background:url("http://img20.imageshack.us/img20/3039/ttolblogplustaxi.jpg") no-repeat ;
padding:300px 0px 0px 50px;
}
Solo has de cambiar la url de la imagen que está ahí y que es la que tienes, por la url de la nueva imagen.

JoanG

Sí, eso lo sé. Mi pregunta era si es posible añadir un código o algo para que esta imagen sea aleatoria entre 4 o 5...

Rosa

JoanG No, tal como está, en el CSS no es posible utilizar ningún otro tipo de código.
Para eso tendrías que retirar la imagen de ahí y seguir los pasos de esta entrada, siempre que el diseño de tu blog tenga el código necesario claro...

Despreciable!!

Hola Rosa,,gracias de nuevo por tus tutoriales. Mi pregunta es la siguiente,,uso el script pero no para ponerlo en la cabecera si no solo para tenerlo en la barra lateral,,pero queria saber si hay forma de formatear el tamaño del script sin tener q darle tamaño a cada imagen (darle un ancho y alto maximo al escrpt)

De antemano gracias.

Rosa

Despreciable!! No, en este caso.

Despreciable!!

Ah ok,,bueno,,me di cuenta q picasa ademas de subir las imagenes en el formato original tb las linkea en el minitamaño de los menus de los albumes de fotos,,asi q estoy usando ese tamaño. Con el truco de imagen aleatoria mas el codigo para ponerles links quedo genial,,tengo el script con 32 imagenes : )

Arigato

miraunapelicula

Hola Rosa, soy Darío, antes q nada, eres la mejor, todo lo q mejoro de mi blog es gracias a ti, asiq GRACIAS !!!
Una pregunta, anda de 10 este truco, pero viste q el blog esta recuadrado ? osae la cabecera la envuelve unas lines (rojas en mi caso) y se separan los gadgets con lineas punteadas rojas, puedes verlo en miraunapelicula.blogspot.com, bueno al hacer el truco, eso se desacomoda todo, hay alguna forma de arreglarlo ? es como q pierde la cabecera y recuadra toda la pantalla.
Desde ya muchas gracias Rosa !!!

Rosa

miraunapeliculaLas imágenes han de tener 1.135px × 200px sino se descuadrará todo si....

Doppelgänger

Muchas gracias, Rosa. Lo habia intentado con otro manual y no me habia resultados.

Muchas gracias!!

A.N.G.

Hola Rosa, tengo una duda sobre un efecto, ya busque en tu blog pero no lo encuentro, en realidad no se bien ni con q palabras buscarlo asi q un disculpa si ya lo tienes publicado :$, bueno esta en esta pagina http://amorinmortal.com.ar/

bueno espero q me puedas ayudar, gracias! =)

saludos!

jeje por poco se me pasa especificar q efecto; es el de la cabecera, veo q son 4 imagenes y supongo q un codigo javascript pero no se como implemetarlo :((.

bueno de nuevo gracias

Rosa

A.N.G. Es javascript y usa la librería JQuery... no tengo demasiada idea sobre como implementarlo... estoy dando mis "primeros pasos" en Scriptaculous... JQuery jamás la he utilizado... lo siento pero no puedo ayudarte en esta ocasión.

A.N.G.

Hola de nuevo, muchas gracias me diste la incógnita, no conocía esa librería ya me puse a buscar y encontré lo que quería el efecto se llama parallax te dejo la pag oficial http://webdev.stephband.info/parallax.html; ahora solo queda hacer las imágenes.
;) buena día, sigo en consulta con tu blog

Rosa

A.N.G. Bien! Muchas gracias por el enlace...¡ me lo guardo ya! :D

Eligor!

Es posible agregar este script en la cabecera, dentro de la plantilla y no en un elemento?

Saludos! :P

Rosa

Eligor! Pues como no he probado, no lo se... prueba a ver tu mismo.

Tristan Oberon

Hola Rosa, acabo de descubrir tu blog gracias a que le pregunté a un amigo como lo hacía para cambiar las imagenes de cabecera de su blog y me ha remitido aquí.

Seguramente haré servir lo que propones pero tengo una duda, ¿es posible cambiar el color de la fuente del título y subtítulo del blog al mismo tiempo que cambiamos la imagen? mas que nada para poder usar imagenes claras u oscuras indistintamente, si no es posible habrá que buscar imagenes sobre las que quede bien un color de fuente "fijo".

Muchas gracias.

Rosa

Tristan Oberon No es posible, al menos que yo sepa...

Tristan Oberon

Ok, gracias igualmente, gran descubrimiento este blog tuyo...

S i r L a l i t o

Graciass, solo una pregunta como le pondria para ke cada imagen redireccione al INCIO

Rosa

S i r L a l i t o Se supone que con este efecto no eliminamos el título del blog, y es el título quien direcciona a inicio entonces.

Karrajo

Hola, Rosa, te felicito por el blog (y por contestar a todos los mensajes).
Estoy probando lo de la cabecera aleatoria en mi blog http://delegoenelmono.blogspot.com/ ; y me ha dado varios problemas.
He seguido los pasos 1, 2 y 3 que comentas, y primero me aparecía el mensaje de error: Mensaje de error de XML: The element type "img" must be terminated by the matching end-tag ""

He visto que alguien te lo ha comentado y le decías de acabar la url de las imágenes con barrita /
Lo he probado y el resultado es que no tengo cabecera en el blog, y cuando miro el script, me ha quitado las comillas de las urls de las imágenes y sustituido por '
y me ha cambiado alguna cosa más.
Te agradecería que me pudieras decir si es que he hecho algo mal o por dónde puedo tirar.
Un saludo

Rosa

Karrajo A veces Blogger cambia las dobles comillas por comillas simples, eso es normal... en cuanto a ayudarte, necesitaría ver el script colocado para ver si hay algún fallo... en los tres blogs de tu perfil no lo he visto...

Analaura Antúnez

Muchas gracias por tu pique. Tengo una consulta... yo lo hice en el blog y en Mozilla se me ve bien, pero en Chrome y Explorer no se ve, aparece el cuadradito de la imagen que no carga. Ahora lo saqué para ver mientras como soluciono... ¿alguna idea? A la brevedad sería genial, millones de gracias !!

Rosa

Analaura Antúnez Ninguna idea... No se en Chrome, porque cuando publiqué esta entrada no disponía de este navegador, pero si está probado en IE7 que era el último entonces...

Me inclino más a pensar que sea por el tipo de imagen, si es .png a veces hay problemas para mostrarlas en IE...

Analaura Antúnez

Muchas gracias. Son todos JPGs... Si se te ocurre algo avisame. :(

Gracias por tu tiempo !

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