156

Rotando imagenes en la cabecera

Hace unos días veíamos la forma de instalar en el blog un widget rotador de imágenes, desde esa publicación son varias las personas que me han preguntado si el mismo widget podría usarse en la cabecera (header) del blog.

Lo he estado probando y el resultado podéis verlo en este blog de pruebas.

[1] Como en la entrada anterior, el primer paso sería disponer de la url de las imágenes que vamos a utilizar y que tendrán todas ellas las mismas medidas.
Estaría bien que estas medidas (al menos su ancho) fuesen las mismas que las que estén aplicadas en vuestra cabecera, aunque no es imprescindible.

[2] A continuación tenemos que descargar el archivo javascript a nuestra PC y subirlo a un alojamiento de archivos.
Una vez allí nos hayan proporcionado la url del archivo, la colocaremos antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[3] Incluimos ahora el código CSS necesario en nuestra plantilla antes de la etiqueta ]]></b:skin>:
/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 5px solid #CC0000;
overflow: hidden;
margin: 0 ;
padding:0;
position: relative;
width: 660px;
height: 173px;
}
#rotator img
{
border: 0;
width: 660px;
height: 173px;
}
Donde dice: width: 660px; y height:173px; colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

Como podéis apreciar, yo he puesto en width (ancho de la imagen) una medida de 660px, que es el ancho de las imágenes que voy a usar y que se corresponde exactamente con el ancho de la cabecera en una plantilla Mínima de Blogger.

[4] Localizamos ahora esta línea en el código de nuestra plantilla:
<div id='content-wrapper'>

Colocaremos ahora antes de esa línea el código para mostrar las imágenes:

<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->

</div>

Aquí incluiremos la url de cada imagen que vamos a mostrar.
Lo más lógico será incluir en donde dice "url_de_la_página_web" la dirección del blog donde vamos a colocar las imágenes.
En "alt" y "title" pondremos el título del blog.

[5] Si en este punto hacemos "vista previa" tendríamos que ver la cabecera original y, justo debajo, la nueva cabecera.
Vamos ahora a ocultar la cabecera original, para hacer esto localizamos esta línea de código en el CSS:
#header-wrapper{
Justo debajo, colocamos esta línea de código:
height:0px; visibility:hidden; display:none;

[6] Guardamos cambios.

Nota:
Si ya hemos aplicado el truco para la rotación de imágenes en otra parte del blog, no podemos usarlo de nuevo sin modificar antes el script y los otros códigos.

Entradas Relacionadas:

156 comentarios:


S. Meneses

lo que se ve fatal es ese filo rojo tan feo. Las imagenes se ven un poco distorcionadas, además. Pero es una buena idea.

Portafolio

Como siempre un trabajo increible, muy util, sigue asi!

Rosa

S.Meneses el borde rojo puede eliminarse o cambiarse de color...en cuanto a las imágenes, algunas están ampliadas "a lo bruto" solo para la prueba...simplemente hay que usar unas con las medidas adecuadas.

Rosa

Portafolio, ¡gracias!

Adriana

Muy interesante Rosa, me gustaría implementarlo en mi blog, ya que soy aficionada a la fotografía y tengo muchas fotos que me gustaría colocar, pero veo difícil encontrar dónde y cómo colocar todos esos códigos... De todos modos, veré si puedo lograrlo.

Rosa

Adriana, inténtalo al menos...verás que no es tan difícil como parece.

Lutor

HOla Rosa buenisimo este aporte pero no entiendo como ponerlo al costado en la cabecera

Rosa

Lutor, para hacer eso tienes que tener el header divido en dos, como por ejemplo en "Todo te gusta" y se colocaría en un gadget o en el lugar donde tienes el banner de publicidad.

Espineli

me ha quedado de perlas Rosa, el efecto es muy bueno :D

Rosa

Espineli, ¡Cahis en la mar! está chulo :D

Lutor

claro yo quiero ponerlo en el lugar de la publicidad pero no me encaja el cuadro

aca una imagen de como queda...

http://i41.tinypic.com/o02lj6.jpg

Rosa

Lutor, tendrías que añadir los valores que necesitas en los padding o margin del CSS para moverlo. Prueba, por ejemplo, cambiando el padding:0; por algo como padding-left: 40px;
eso marca la distancia desde el título al rotador, busca el valor más adecuado...

Lutor

de alto me quedo bien
ahora el problema es que me quedo demasiado largo el cuadrado

http://i39.tinypic.com/2dh91ft.jpg


{
margin:0px;
padding-left: 95px;
}
#rotator
{
border: 1px solid #CC0000;
overflow: hidden;
margin: 0px;
padding-left: 190px;
position: relative;
width: 430px;
height: 85px;
}
#rotator img
{
border: 0;
width: 430px;
height: 85px;
}
p
{
text-align: left;
}


asi lo tengo

Rosa

Lutor, perdona, ha sido error mio :$

Déjalo como estaba antes y añade el padding-left debajo de:
#rotator img
{
Debajo de esa llave{

kAlakat!

hola rosa, me gustaria saber como puedo dividir los comentarios en blogger, para que se vean asi como tus comentarios con margen y la barra sobre ellos, me gustaria colocar esto en mi blog y personalizarlo con imagenes.

Gracias

Rosa

Kalakat, todo lo que he añadido en mis comentarios y más, lo encuentras arriba, en la etiqueta que dice "comentarios".
La entrada para hacer lo que dices concretamente, creo recordar que se titula "color de fondo en los comentarios".

Lutor

no no me sale :( me queda malll

Lutor

Lo logre Gracias rosaaaaaa!!

no tenia nada que ver mietnras tome el tamaño de los

width:
height:

si queda cualquier cuadrado no importa

Gracias de nuevo .. si queres agregame a recomendados y yo hago lo mismo rosita

saludos

mojul8

muy bueno de lo mejor que has publicado últimamente te sigues superando

hasta luego y feliz año

robersnake

Gracias Rosa hace tiempo que busco algún script como esto.

La pregunta es una vez que cambian se le puede dar ruta a cada imagen rotante (es decir que cada imagen que vaya apareciendo tenga in link a una pagina) o de plano no.

Saludos.

Nicolás

Hola Rosa,

De nuevo incordiando. Me gustaría saber cómo centrar el menú de navegación de debajo de la pàgina y cómo darle el mismo color y aspecto que el resto del blog.
ESpero tu consejo.

http:/ulises3000.blogspot.com

Nicolás

Nicolás

Una cosa más Rosa: he intentado crear un enlace a comentarios con una imagen pero me supera. Me pierdo y no lo consigo. ¿hay alguna forma de hacerlo que sea un poco más sencillo?

La verdad es que la pregunta me da un poco de vergüenza, pero si no pregunto no aprendo.

Nicolás

Miguel

Hola Rosa, sigo amenudo tu blog, más que nada porque me sirve para adecentar el mio. Espero que me comentes, habida cuenta de que me gusta mucho la fotografías, como puedo poner de tapiz de fondo de mi blog una o varias fotografías. Gracias. Mi dirección del blog:
http://migueldejaen.blogspot.com/
Gracias. Que pases un feliz 2009

Rosa

robersnake , si, así es, de hecho el truco original es con un enlace distinto a cada imagen, puedes colocar un enlace en cada una que lleve a donde gustes.

Rosa

Nicolás, quizá tal como lo explica Pizcos en su blog te sea más fácil (lo de los comentarios en la imagen):
http://humanossinsentido.blogspot.com/2008/09/nmero-de-comentarios-arriba-de-la.html

Un Perro

Hola Rosa (de nuevo), me podrías recomendar un alojamiento de archivos fiable, yo solía utilizar Lycos, pero cuando quise ingresar para alojar el archivo que mencionas, me encontré con un aviso de cese de alojamiento, en fin, que me he quedado desconcertado y sin saber para donde ladrar.
te agradezco el consejo
Y Como siempre, muchísimas gracias por todo

"El que sabe, sabe, y el que no...debe pasar por el Escaparate"
:)

Rosa

Miguel, en el fondo (body) del blog, solo puede ponerse una imagen, claro que esta imagen podría estar compuesta por una o varias fotos, pero solo puede ser una como te digo.
Puedes ver como hacerlo aquí:
http://elescaparatederosa.blogspot.com/2007/01/imagen-en-el-fondo-de-pgina-blogger.html

Rosa

Un perro, últimamente yo uso SkyDrive, más que nada porque admite todo tipo de archivos:
http://elescaparatederosa.blogspot.com/2008/12/skydrive-alojar-archivos-y-usar-la-url.html

Rosa

Nicolás, para centrar los enlaces de navegación, creo que lo mejor sería volver a conseguir el diseño original que Blogger da a las plantillas, porque la verdad, el de esa deja bastante que desear...

Mira, ve a edición html y expande las plantillas de artilugios, localiza esto:
<!-- Navigation -->
<div class='navigation'>
<div class='navigation-previous'/>
<div class='navigation-next'/>
</div>
<!-- /Navigation -->

Lo eliminas de la plantilla y luego vuelve hacia arriba y busca esto:

/* Main - Content - Navigation */

Debajo de eso pegas este código:
#blog-pager-older-link {
float: right;
}

#blog-pager-newer-link {
float: left;
}
#blog-pager {
text-align: center;
}

Y no te de verguenza...esa plantilla se las trae, la verdad, al final conseguirás dejarla ok, ya verás.

Lutor

Hola Rosita soy yo de nuevo pero ahora con otro problema ,que no lo vi en tu blog y me gustaria explicado por vos ya que me sale todo ..

esto

http://ayudaparaelblog.blogspot.com/2008/11/paginacin-en-el-blog-80.html

el problema es cuando le doy a la hoja 2 me salta a la 15 y no entiendo como puedo hacer para que corra bien ..

espero que me puedas ayudar como siempre lo haces ...

Muchas gracias :)

Rosa

Lutor, pues lo siento mucho, pero precisamente por eso no lo he publicado en mi blog, porque nadie hasta ahora ha podido corregir esos fallos en la paginación...es difícil controlar eso en Blogger.

Albus Dumbledore

Hola Rosa, cómo te va?...

Aquí de nuevo pidiendo tu ayuda, desde ayer en la noche estoy intentando cambiar mi plantilla pero no puedo por que me arroja el siguiente error:

Sólo puede existir una única máscara en la plantilla, y hemos encontrado: 0

No se que hacer, me podrías ayudar...

Espero tu respuesta...

Un beso... :)

Greyback

Saludos Rosa es la primera vez que te escribo y necesito un consejo, es acerca de los tags. La cuestion es que si puedo (¿como decirlo?)ponerlos en forma de pestaña y personalizarlos.
Es decir para ponerlos debajo de la cabecera y al dar clik a una opcion (o tag) se abran opciones (otros tags)

Un ejemplo
Mi blog habla de comicsy tengo varios tags asi que quiero que al dar click en:

Comix

se habra una pestaña con mas opciones desglosando los temas:

Spiderman
Hulk
Iron Man

Espero haberme explicado y espero tu respuesta

Rosa

Albus, eso es porque esa plantilla no es compatible con la versión nueva de Blogger, ha de estar en formato .xml para que sirva...supongo que será para la versión clásica.

Rosa

Greyback , o sea, un menú con sub-menus.
Estoy preparando una entrada para explicar uno de ese tipo, sería casi imposible hacerlo en un comentario.

PedroX

Perfecto Rosa. (Bueno asi creo yo:-|) Gracias! :D
(http://worldreggaeton.blogspot.com/)

Un Perro

Hola Rosa !!
Voy tan bien !!
que en algo me tenia que trancar :(
veo las dos cabeceras y estoy en la parte de eliminar una.
ahora cuando busco en el código esta parte que mencionas #header-wrapper{
pues no me encuentra nada y ya me he vuelto chino de buscar y buscar a puro ojo en todo la plantilla.
:-|
donde se ubica ese código para poner debajo el que mencionas tu Rosa?
Desde ya muchas gracias

Rosa

Un perro, ¿para que blog es? Porque si es para cualquiera de los tres que hay en tu perfil, el código está.
Mira en el CSS en la parte donde hay muchas llaves {

Un Perro

Bueno Rosa
Lo he logrado!!
solo que parece que las imágenes no rotan y la imagen no me queda centrada, sino que sobre la izquierda de la cabecera.
:(
:Scomo me duele la cabeza:S

Rosa

Un perro, a ver...dame la url del blog para mirarlo, aunque sea de pruebas...

Un Perro

te dejo la dirección de el blog
http://jauriadeperrosverdes.blogspot.com

Rosa

Un perro, tienes el script mal colocado.
Tiene que estar más abajo, justo encima de </head> (paso [2])

Para que la cabecera salga centrada, mete su código (paso [4]) entre <div style="text-align: center;"> y </div>

Albus Dumbledore

Rosa disculpa si soy algo necio...

Te quería preguntar si estaría en tus posibilidades que vieras la plantilla que te dije anteriormente y me dieras tu opinión, para ver porque no se puede cargar en blogger...

Aquí es donde se encuentra el código de la plantilla: http://www.wishafriend.com/blogger/layouts/harrypotter/harrypotter4.php

Si no tienes tiempo no importa no pasa nada...

:)

Ciudadanos en la Red

Hola Rosa,

¿Podrías comentar cómo has solucionado el problema de los 5000 comentarios (o dónde podemos leer cómo arreglarlo)? Tenemos el blog atascado en esa cifra y no aparecen los nuevos comentarios en la barra de la derecha.

Ciudadanos en la Red

Muchas gracias.

Graciela de Palomas

:) bonito Rosi, las imágenes de los ositos ohhh...buen día tesoro y besitos!!!

Rosa

Ciudadanos, Blogger es quien lo ha solucionado al fin. Tranquilo, en unos blogs tarda más que en otros pero van poniéndose al día...

Un Perro

Hola Rosa
Otro día mas al que recurro a vos (ya sos una especie de guru para mi).
Con respecto al rotador de imágenes: confieso que no supe donde poner el código que me mencionas div style="text-align: center;" (eso lo dejo para después)

Pero ayer deje todo para hoy pues la cabeza no me daba para mas, pero cuando verifique por ultima vez el blog me encontré con que todo, absolutamente todo, los slidebar y el blog, estaban justificados hacia el centro...Es decir, en las slidebar, el texto y las fotos, todo hacia el centro de la misma, y en el blog lo mismo.. no se que pude tocar ayer con la nebulosa que atravesaba mi cabeza.
(Si ves mi cara por el piso es que se me cayo de vergüenza, discúlpame por plantear este problema en este post que poco tiene que ver con la temática del mismo)
Desde ya muchas gracias.
Un beso desde Uruguay

Un Perro

Bueno, esto me supero ampliamente, ahora no solo persiste el problema que te mencione antes, para colmo ahora me desaparecio el blog, y casi todas las secciones de las slidebar, fotos, menu, directorios, favicones, en fin, todo, solo me dejo lo que tenia en la parte baja del blog, tres widgets.
Veo las entradas de los blogs que tengo publicadas en la seccion entradas, pero en la vista de el blog tan solo se ve la cabecera y los ultimos tres widgets que tenia a los pies de el blog
:S:S:S:S
Help me !!
un beso Rosa

Rosa

Un perro, tranquilo, de una u otra forma lo solucionaremos...

Mira donde has colocado el código para las imágenes, justo después de esta línea:
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->

Coloca un </div> que te "has comido" :D

Luego me cuentas.

Un Perro

Hola Rosa:
en efecto, he agregado el cierre del div que me había comido, pues ahora cuando quiero guardar o pre visualizar la plantilla me dice que hay un error de Xml, puse exactamente la parte de las imágenes del código del paso 4 nuevamente y me sigue mostrando ese mensaje.
:S:S:S

Un Perro

listo listo Rosa !!
discúlpame, es que me pongo tesudo y las cosas no me salen por trancarme en mi propia inoperancia.
Lo he arreglado y el blog ha aparecido.
ahora solo queda el tema de que todo quedo justificado al centro
Eres un sol !!!

"El que sabe, sabe, y el que no..debe pasar por el Escaparate"

Rosa

Un perro, tu código en la parte final del rotador se ve así:

<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->
<div id='content-wrapper'></div></div>

Ha de estar así:
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->
</div></div>
<div id='content-wrapper'>

Un Perro

darte las Gracias me parece tan poco comparado con la mano que me has dado en la construcción de mi blog Rosa.
Muchisimas gracias por tenerme tanta paciencia.
Ha quedado todo como antes, lo de la cabecera centrada no es algo de importancia suprema.
Te mando un beso enorme y millones de gracias,
"El que sabe, sabe, y el que no...debe pasar por el Escaparate"
:D:D:D

Rosa

Un perro, pero el rotator no funciona y además no me gusta que no quede centrada...envíame la plantilla.

Copiala con los artilugios expandidos y pegala en el mismo email.

Elsa

Hola Rosa, yo acá de nuevo:quiero colocar el rotador de imágenes en la cabecera pero en la plantilla no me aparece la línea div id=content-wrapper'
GRACIAS POR ESTAR!!!

Rosa

Elsa, necesito ver el blog donde vas a colocarlo.

Un Perro

Hola Rosa, he cambiado la plantilla, y todo ha quedado como antes, sin problemas, intente volver a aplicar el rotator y me di cuenta de que cuando le hago los cambios al CSS es cuando los comentarios quedan justificados al centro. Por eso decidi dejar todo como esta.
Bueno, era todo para contarte los cambios en la Jauría.
un beso desde Uruguay

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

Rosa

Un perro, para "cabezona" yo :D

Ya he dado con ello, y resulta que no es un fallo de tu plantilla...es un error mio.
Había colocado al final del CSS del rotator el código para centrar las imágenes con "p" es decir, para que afectara al "cuerpo" del rotator.
El código además de innecesario, resulta que lo que centraba era el texto de partes del cuerpo de la plantilla:$

Solo hay que eliminar esto del CSS del rotator:

p
{
text-align: center;
}

Ya he modificado el código también en la entrada.

¡Mil perdones por hacerte trabajar tanto sin motivo!

Un Perro

En efecto Rosa, los comentarios se justificaron de manera normal, pero el rotator sigue sin rotar las imágenes, y me ha quedado alineado hacia la izquierda del blog :S:S
como al principio.
incluso probé poniéndole el código que me sugeriste para alinearlo, el que iba en las imágenes del rotator, pero nada.
Por lo menos la parte de ver los comentarios de manera normal quedo solucionado.
Muchísimas gracias como siempre y no te preocupes por hacerme trabajar tanto, para mi el motivo es ir aprendiendo y me encanta todo el tema este del CSS.
un beso enorme Rosa :)

Un Perro

bueno, centre la cabecera a fuerza, le agregue al width una medida extrema y borre el borde, ahora quedo como al comienzo, pero sigue sin rotar.
un paso a la vez :D

Elsa

Hola Rosa, probé en el blog http://protagonistas-delcambio-educativo.blogspot.com pero no aparece el texto al buscarlo.
Ahora tengo el blog de prueba que lo inicié hace muy poquito con una plantilla de tres columnas, pero tampoco lo encontré esta es la dirección http://probandoasidefacil.blogspot.com/
Muchas gracias por toda la ayuda que brindás.

Rosa

Elsa, en el caso de tu blog de pruebas, sería:
<div id='outer-wrapper'>

Pruebalo ahí, si más tarde sigues interesada para el otro, me comentas lo que sea, mejor antes en uno de pruebas;)

Rosa

Un perro, prueba a mover el CSS justo a debajo o sobre el código del rotator, así:
<style type="text/css">

{
margin: 0;
padding: 0;
}
#rotator
{
border: 0px solid #000000;
overflow: hidden;
margin: 0 auto;
padding:0;
position: relative;
width: 900px;
height: 173px;
}
#rotator img
{
border: 0;
width: 660px;
height: 173px;
}

</style>

A ver si es que en el css no te lo toma...

Un Perro

hola Rosa, bueno pues hice lo que me sugeriste y no hubo cambio aparente, tan solo me tomaba esta linea "/** Page structure tweaks for layout editor wireframe */"
y la dejaba visible arriba de la cabecera.
un beso grande Rosa
:)

Rosa

Un perro, porque esa línea es del código que va debajo del css del rotator, no forma parte de el.

Elsa

Hola Rosa, probé y te cuento: la nueva cabecera me aparece arriba y abajo la original, copié el código pero sigue visible. Las imágenes no aparecen, si el título ¿puede ser porque guardé las fotografías en la misma carpeta donde está javascript? Guardé los cambios, en el blog de prueba si podés dale una miradita.
Otra vez gracias por tu ayuda

Rosa

Elsa, en tu blog de pruebas no veo el código que hace que la cabecera original se oculte, así que por eso se sigue viendo.

En cuanto a las imágenes, la url de SkyDrive no es la correcta. Para las imágenes alojadas allí, la url que se usa es la que sale una vez subida la imagen y pinchando sobre ella, cuando la imagen se muestra ella sola en una página aparte y en blanco.

Elsa

Hola Rosa ¡GRACIAS! lo logré. Ahora seguiré trabajando con el color del título que quedó poco visible. ¿qué haría sin tu ayuda?
No hay palabras...
Amo la naturaleza por eso las imágenes son de mi bella provincia.
Cariños

Rosa

Elsa, ¡qué bien! me alegra mucho oír eso:D

PedroX

Hola Rosa.. he estado viendo los comentarios para ver si puedo resolver mi problema y me he dado cuenta de varias cosas.. No sabia por que mis comentarios y un elemento en la sidebar se habia CENTRADO.. y me di cuenta que era por esto. Ahora el otro problema es: El script deja de funcionar muy a menudo.. He tenido que alojarlo 3 veces (una vez a yahoo geocites y las otras dos a SkyDrive) desde que lo coloque (08/01/09). No se si sera por mi conexion QUE HA ESTADO HORRIBLE y no se carga el script o NO SE QUE PASA... Te pido por favor si puedes entrar al blog y ver si funciona.. Sino para volver a subirlo |O http://worldreggaeton.blogspot.com/

Rosa

Pedrox, ahora mismo está funcionando perfectamente.
Ya sabes que hasta que acaba la carga del blog no comienza a funcionar, así que si el blog se queda parado esperando por un video o cualquier cosa que no carga, el rotator no funcionará.

En mi blog de pruebas está alojado en SkyDrive desde que lo instalé y va bien.

PedroX

Si ya me di cuenta que es eso.. No se porque mi conexion esta asi :S Es Horrible..

Gracias y Un Saludo!! ;)

LuzdeLuna

Hola Rosi, ya puse en mi cabecera el rotador, pero tuve que sacar el de los banners, no pude hacer funcionar los dos a la vez!
Te quería preguntar, las imágenes se ven en el editor,:D no deberían verse ahí no? cómo las podría sacar para verlo como siempre y el rotador solo en el blog?
Bue, funciona solo que se ven raras ahí :)
Un abrazo

LuzdeLuna

vaya, sorry, leyendo el comentario no sé si me expliqué bien! :$

Rosa

Luzdeluna, te has explicado perfectamente, no te preocupes:D

Quieres decir que se ven en la parte de "diseño" y eso es correcto, al anular la cabecera de Blogger esto es así, de hecho yo también veo mi cabecera en esa parte, y muchas de las plantillas adaptadas para Blogger también la muestran en el "revés" (como yo le llamo), no es ningún problema.

LuzdeLuna

:) oki entonces la dejo así! me preocupó ya que también tengo el footer fuera de lugar ;) se me fue para arriba, creo que revuelvo demasiado la plantilla!jajajaja
Un abrazo Rosi y gracias!

Mortadelo

Hola Rosa. Cuando intento localizar la linea div id='content-wrapper' en mi plantilla, no la encuentro, por lo que no puedo continuar. ¿Que debo hacer?

Gracias.

Rosa

Mortadelo, mira entonces si está esta:
<div id='outer-wrapper'>

carlos

rosa tengo un problema tengo este javascript parecido al tuyo el problema es que quiero centrarlo pero no e podido recurro ati haber si me ayudas plz
este es el codigo: codigo javascript
espero q me puedas ayudar aca mi blog
blog
y la captura de mi problema
captura
espero q puedas solucionar mi problema no se que hacer :(

Rosa

carlos, en el script hay una parte que dice: no-repeat left TOP

Creo que es ahí donde deberías cambiar left por center

carlos

muchas gracias eres la mejor rosa :D lo peor es que me cree yo el codigo y me equivoque en una solucion tan obvia :(
pero yo sabia que te me lo solicionaria
gracias

M. Pitri

Holas!

Recien conoci tu blog y justo estaba buscando esta clase de info.

Pero lo que yo quisiera es que cada vez que entro al blog, aparezca una cabecera distinta, es decir, que en vez de rotar por tiempo, vayan rotando por entrada.

Como si cambiara al refrescar la pagina, no mientras la estoy visitando.

Sabrias como hacer eso?

Yo tenia el codigo pero lo perdi.

cuidese!

Rosa

M.Pitri creo que esto te servirá:
http://elescaparatederosa.blogspot.com/2008/05/imagenes-aleatorias-en-la-cabecera.html

NOSOTRAS

Hola Rosa se me quedo precioso pero me queda muy a la izquierda,
¿se puede central? muchas gracias cariño

NOSOTRAS

perdona centrar jiji

Rosa

NOSOTRAS Mira en el comentario número 42

mojul8

Hola rosa, he hecho todo lo que aquí explicas y todo perfecto, cabecera centrada etc... pero con un problema que no rota ni para atrás...

¿que me puede pasar?

muchas gracias de nuevo amiga

mojul8

jejejejeje no te he puesto mi link


http://albacete-fotos.blogspot.com/

de nuevo gracias

Rosa

mojul8 Pues yo lo veo todo correcto...intenta añadir alguna imagen más a ver si el script trabaja entonces...

mojul8

hola rosa, pues no te lo pierdas, resulta que en la plantilla de diseño de blogger se ve rotar la imagen de la cabecera....

pero cuando le doy a ver el blog normal no rota...

¿que me lo expliquen?

vaya tela...

Rosa

mojul8 Algun otro código o script entonces con el que se "choca" el rotador, supongo...

mojul8

PUES CREO QUE ES EL PRIMER SCRIPT QUE USO EN EL BLOG... PERO LA VERDAD QUE NO TENGO NI IDEA, SI NO VES NADA TU QUE ERES LA EXPERTA (YO QUE SOY UN TORPE...)LO TENDRE QUE QUITAR DEL BLOG.

Céz

Rosa, me he dado cuenta de algo, implementé el rotator para la cabecera, hice todo y me salió muy bien en mi blog de pruebas y repetí lo mismo en el otro, el definitivo y zas! desapareció el menú! Cómo puedo resolver eso? De verdad me urge resolverlo puesto que mañana cumpliré un año en linea jejeje.

Rosa

Céz No se que habrá pasado sin ver el blog...los tienes todos en privado :S

Céz

Rosa, recibí tu respuesta en la tarde de hoy, realmente estaba preocupado por la desaparición "misteriosa" del menu que habia hecho anteriorment y lograste resolver este problema con la plantilla original, sin embargo, no era que el tenía, jejeje, pero afortunadamente tenía una copia de códigos y urls de iconos. Así que problema resuelto. Muchísimas gracias!

Céz

Uhmm, tendré que repetir lo que decía antes, olvide algo, como el rotador de imagenes es temporal en mi blog, para quitarlo, debo eliminar todos los códigos antes del head, b:skin, todo lo antes citado para dejar con una imagen fija en la cabecera como en los demas blogs? cierto? :S

Rosa

Céz Por eso te decía que saldría como en la plantilla original "o parecido", porque me "copié" los códigos de la plantilla que hay para descarga en BTemplates :S

Si, para quitar el rotador tienes que eliminar todo lo añadido...pero ya sabes, puedes avisarme de nuevo si tienes problema... ¡me guardé tus datos de acceso! :P

Céz

Si, la verdad, a mi nunca se me habría ocurrido eso porque el menu original era horrible jejeje, no quería volver a verlo jamás! jajaja. Muchas gracias por darme una mano.
:)

Siervo

ROsa, te consulto, he visto hace tiempo que usas adsense de google, he visto muchos trucos en otros sitios para poder poner adsence en las estradas del blog ya sea debajo del titulo a un costado en fin, como ves yo tambien uso adsense mas aun no hago ningun truco de las otras pagina jejeje porque no tengo confianza en ellas mas te consulto a ti haber si me recomiendas hacerlo y esperar haber si te animas a publicar sobre adsense. Gracias...:p

Rosa

Siervo No se mucho más de Adsense que tu :S lo añadí desde el panel en la pestaña "Monetize" allí puedes escoger mostrarlo en las entradas...otro poco que estoy empezando a saber es leyendo en la Ayuda de Adsense :S

Alegna

Hola Rosa cuando pincho en "descargar el archivo javascript" me sale una pagina de error de Dropbox... :(

Muchas gracias por el maginifico trabajo que haces con este blog... :)

Rosa

Alegna Mil perdones :S
Ya está corregido.

Alegna

Muchissimas gracias Rosa, ahora ya me va bien el enlace :) lo he probado en mi blog de pruebas y funciona a la perfeción :) Ahora solo me falta elegir las imagines definitivas para los otros blogs :((

Muchas gracias por todo :D

ERNESTO MARTÍN LÓPEZ GONZÁLEZ

gracias yo también lo pude implementar

SPC

Hola Rosa:
He seguido sus instrucciones hasta el punto 4 pero al momento de poner vista preliminar me da el siguiente mensaje de error:

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 value of attribute "src" associated with an element type "null" must not contain the '<' character.

Por favor podría ayudarme a solucionar el problema. Gracias

Rosa

SPC En el código de alguna de las imágenes te falta < al comienzo de <img src= probablemente.

SPC

Hola Rosa:
Muchas gracias por su pronta ayuda. He corregido el error que Ud me mencionó. ahora luego de poner vista previa consigo ver el borde rojo del rotador pero no las imagenes...que podrá ser ? Muchas gracias nuevamente

Rosa

SPC Todo está correcto, así que supongo que sea el formato de las imágenes el problema, trata de usar .jpg o .gif ... en fin, alguno que no sea el .bmp

HECTOR

Hola Rosa, muy interesante y util todo lo que pones por aca, mi pregunta es, algo como este rotador de imagenes no aparece algo para los banner, pero que cambie con la pagina abierta?
he encontrado varios pero hay que refrescar la pagina para que cambie, ayudame con eso please

Rosa

HECTOR No has leído la entrada supongo, porque al comienzo hay un enlace donde explico eso precisamente.

HECTOR

Rosa, claro que lo he leido, pero lo intente y no me ha salido, por eso te he escrito

HECTOR

He usado el Rotando imágenes con Scriptaculous, el que pense mas dificil y ese si me ha funcionado, MUCHAS GRACIAS

Ironú Mora

HOLA Q TAL..SOY NUEVA EN ESTO..YA HE PROBADO TODO EL PROCESO Q EXPLICASTE PERO LAS IMAGENES NO ROTAN..NO SE SI ES PORQUE LA URL DEL SCRIPT LA BAJE CON SKYDRIVE Y ME DIO UNA URL Q TERMINA EN TX Y NO EN JS..GRACIAS

Rosa

Ironú Mora La url está alojada en Google Sites en formato de .txt y funciona igualmente...
Si has usado SkyDrive para alojar el archivo,entonces estás perdida... hace meses que no se pueden usar archivos alojados allí en el blog, la url deja de ser útil al poco tiempo de subir el archivo.

Comunicación - ARTIMAGE

HOLA ES LA PRIMERA VEZ Q TE ESCRIBO PERO SIEMPRE HE PODIDO GRACIAS A TUS CONSEJOS ARMAR MI BLOG, PERO ESTOY TENIENDO PROBLEMAS CON LA CABECERA,PUSE EL ROTADOR PERO LAS IMAGENES NO ROTAN, PODRIAS AYUDARME? MIRIAM

Rosa

Comunicación - ARTIMAGE Tendría que ver el efecto colocado para intentar saber que falla...

Dark

Hola rosa sabes uso tu truco desde hace tiempo y te lo agradesco mucho relamente eres grandiosa, me gustaria saber como hago para que el rotador de imagen demore un poco más en saltar de una imagen a otra, gracias.

Rosa

Dark Para eso hay que modificar el script, todas las veces en que aparece esta línea cambiar el valor 3000 por uno más alto.
setTimeout(so_xfade,3000);

Boy_nice

hola rosa es mi primera vez que escribo en tu blog y esta muy bueno por cierto la pregunta que queria hacer es que ami el rotador de imagen no me queda centrado no se si me puedas ayudar esta es la url http://programasymasss.blogspot.com/ gracias

Rosa

Boy_nice
La respuesta en el comentario número 42... por eso siempre deberían revisarse comentarios anteriores...

Boy_nice

hola rosa otraves molestando por aca de hecho si revise los comentarios antes de escribir por primera vez pero al igual que perro no supe donde poner el div style="text-align: center;" y /div he probado poniendolo encerrando el codigo del paso 4 como tu dices y en otras partes pero nomas no sale

Boy_nice

espero me puedas ayudar y si no tienes tiempo no t preocupes :)

Quien te lo dijo...

Rosa, ya tengo en mi blog un rotador de imagenes (para lo cual ya he bajado el js, etc.), ¿hay algún problema si pruebo agregar para rotar tambien la cabecera como nos enseñas acá?. Has dicho que habría que cambiar el script, ¿que se debería hacer?. Gracias

Rosa

Boy_nice En el código del paso [4] cambia la primera línea: <div id="rotator">

Por esta:
<div style="text-align: center; id="rotator">

Boy_nice

pues sigo en las mismas ya puse el codigo que me dijiste y borre el otro pero me dice que ay un error y que no se puede guardar la plantilla que me asegure que todos los xlm esten cerrados correctamente y de hecho estuve haciendo varias pruebas y me admitio solamente el codigo asi div style="text-align: center;" id='rotator' pero de nada sirvio por que me lo admitio pero las imagenes salen todas separdas y no rotan espero me puedas ayudar y perdon por tantas molestias

Rosa

Boy_nice Pues no se que haces mal... desde aquí me es imposible saberlo claro... solo decirte que tal como te digo es, de hecho Perro así lo hizo sin problemas...

Quien te lo dijo...

Hola Rosa, te deje una consulta el 13/1 y no se si se te ha escapado, ¿cuando tengas unos minutos, puedes verla?.
Gracias

Rosa

Quien te lo dijo... No se me había escapado...se ve que Blogger no publicó la respuesta... te decía que no es posible usar dos rotadores, al menos yo no he podido hacerlos funcionar en la misma página y que mirases este otro sistema para el header:
http://elescaparatederosa.blogspot.com/2007/04/header-aleatorias-para-el-blog.html

FILÁ NOSOTRAS

Rosa lo puse y me funciona pero creo que algo no hice bien, porque desde que lo he puesto la pagina no se termina de cargar nunca

Rosa

FILÁ NOSOTRAS A mi me ha cargado sin problemas y funciona bien, claro que yo tengo 30 megas de conexión...hay que pensar en que el blog será visto por personas con conexiones muy limitadas... no solo la cabecera... tienes infinidad de imágenes, el script del puntero...todo "pesa" en un blog y al tuyo le haría falta "adelgazar" un poquito...

Dark

Rosa, disculpa q te moleste pero no puedo centrar el header en mi blog, mira este es mi blog http://dynamiccollector.blogspot.com/
espero me puedas ayudar gracias besos y abrazos att Dark

Rosa

DarkPor lo que he visto en tu código fuente, no has colocado el código del rotador con las imágenes donde deberías.... está sobre el header anterior y debería ir justo después de <!-- end header-wrapper -->

pruebillas

Hola Rosa.
Quiero hacerte una consulta y elegí este post para hacerla porque quizas tenga que ver con el tema. Resulta que tengo ya implementado en mi blog este rotado de imagenes en la cabecera y justamente debajo un "menu con sub-menu" (http://elescaparatederosa.blogspot.com/2009/02/menu-con-sub-menus.html), bien.. ahora quise agregar un widget en la sidebar y no puedo ubicarlo (arrastrarlo) en el lugar que yo deseo... está todo como "anclado". Ni siquiera el menu puedo mover,
Podrias indicarme que pasos seguir para poder ubicar mi elementos ? Muchas Gracias por tu tiempo.
Sergio-La Plata-Argentina

Rosa

pruebillas No se debe a nada que hayas hecho tu... estamos la mayoría con ese problema... es algo de Blogger, aunque algunos dicen que se soluciona usando otro navegador u otra versión del que estás usando...

pruebillas

Rosa.... muchas gracias por la pista !!!
Utilizo habitualmente Firefox y hace unos dias baje la ultima version 3.6, con esta version no funciona. Con IE version 7 sí funciona.
Muchas Gracias nuevamnete
Saludos
Sergio-La Plata-Argentina

Carolina

Hola Rosa:
He colocado el rotador en mi blog, pero aparece corrido hacia la derecha, intente hacer todo lo que salia en los comentarios para centrarla pero nada funciono. mi blog es carolinatecmedico.blogspot.com y te envio la plantilla a tu correos para que eches una mirada.
gracias

Rosa

CarolinaTodas mis explicaciones están siempre basadas en plantillas originales de Blogger, que no es tu caso... tu plantilla tiene otro diseño e incluye imágenes que forman la cabecera y el cuerpo del blog, es por eso que no se ajusta siguiendo estos pasos... y yo lo siento, pero para plantillas no de Blogger no puedo andar mirando, hay cientos... tendría que ponerme a "estudiar" el código en el diseño de todas y cada una y eso me es imposible, no tengo tiempo como para hacer cada cosa a la medida de cada uno... lo siento.

Carolina

Hola Rosa:
He podido arreglar la mayor parte de mi problema volviendo a restaurar la cabecera original, pensé que era lo mismo incorporarlo en cualquier tipo de plantilla, pero de todas maneras te agradezco tu respuesta.

EstoesVejer

He hecho este truco y me ha salido perfecto, gracias Rosa.

Pero me gustaría poder poner el título del blog debajo de este rotador, ¿cómo podría hacer esto?, ¿tienes alguna entrada al respecto que me pueda orientar?

He revisado los comentarios y no encontré nada parecido.
Gracias por tu tiempo

Rosa

EstoesVejer Cuando añades este efecto, eliminas la cabecera anterior y por tanto su título... no puede volver a incluirse...

M@nuel

Hola Rosa,
Mi intención es poner en el rotador de imágenes fotográfias panorámicas con una altura variable para no tener que recortarlas dejando solo fijo el ancho. He intentado suprimiendo la linea "height" pero no surte efecto. ¿Podría hacerse de alguna otra manera? Gracias.
Saludos.

Rosa

M@nuel No, al menos que yo sepa... ha de marcarsele la altura y además todas las imágenes han de tener las mismas medidas...

M@nuel

Rosa, he puesto el rotador de imágenes y en IExplorer salen centradas pero en Firefox se ven desplazadas a la izquierda si la resolucion del monitor es mayor al ancho del blog.
Mi blog de pruebas: http://probandoloscambios.blogspot.com/
Saludos.

M@nuel

Rosa, ya lo he solucionado modificando el valor de "margin".
Saludos.

MONICA

http://especialcocina.blogspot.com/
Hola Rosi.
Modifiqué mi blog siguiendo tus instrucciones, partiendo de una minima de blogger.Por qué no me funcionan las palabras de arriba, inicio, suscribe,contacto,sobre mi, buscar...tampoco se me ven las fotos de mis seguidores y no se puden escribir comentarios. Es como si no funcionara nada de la sidebar...qué puedo tener mal? le he dado mil vueltas. Gracias

Rosa

MONICA He visto tu blog y así he sabido a que te referías cuando dices "Modifiqué mi blog siguiendo tus instrucciones"... lo normal es que este comentario estuviese en la entrada que seguiste para hacer los cambios... porque si no es difícil me entere de que hablas...

Supongo que hablas de la cabecera ancha y el menú... eso es una cosa que nada tiene que ver con Seguidores y comentarios... es decir, en tu comentario entiendo que piensas guarda relación y no es así...

El gadget de Seguidores lleva tiempo dando problemas de visualización, dependiendo de si usas algún script en la plantilla que interfiera o del navegador que uses...

Los comentarios, el enlace para comentar, no se muestra... en primer lugar has de añadirlo desde Diseño - opciones de entrada, pues si no difícil saber de donde viene el problema... si lo has añadido y aún así no sale, me dices si es así...

En cuanto a los enlaces de la cabecera, no funcionan de forma automática claro... eres tu quien tienes que añadir los enlaces en el menú... tal como explico en esta entrada:
http://elescaparatederosa.blogspot.com/2009/09/como-anadir-los-enlaces-en-un-menu.html

MONICA

Rosa, muchas gracias,voy donde me remites para seguir tus instrucciones.Perdona mi ignorancia,escribí donde no debía.

Arwen

Rosa he seguido los pasos que indicas aquí pero no consigo que roten las imágenes sólo aparece la imagen de la primera...por favor me podrías ayudar. Gracias.
Arwen

http://versoscalados.blogspot.com

Rosa

Arwen Es que mi ayuda sería lo mismo que en la entrada... es decir, está comprobado que funciona, si no va... algo no has hecho de forma correcta... mira en comentarios anteriores por si te sirve de ayuda.

ELECTRO SOUTH CHILE

Hola Rosa:

Instale el rotador perfectamente y queria consultarte como puedo hacer para que el rotador aparezca sólo en la pagina principal, debería hacer algún dato para ocultarlo a algo así a las otras entradas.

Gracias

Rosa

ELECTROIncluye el código del gadget (el 2º añadido) entre <b:if cond='data:blog.url == data:blog.homepageUrl'> y </b:if>

ELECTRO SOUTH CHILE

Muchas Gracias Rosa!!

Habia intentado varias formas y ninguna habia dado resultado, ahora me quedo perfecto.

Gracias

Fabiana

Rosa no lo conseguí. Me dice esto The value of attribute "src" associated with an element type "null" must not contain the '<' character.

Espero puedas ayudarme, Gracias.

Rosa

Fabiana Como no puedo verlo, no se decirte con exactitud... nada más que el problema está en la url de las imágenes o en una o en varias... en algún lado le falta ese carácter que te indican.

Vero Rodriguez

Hola rosa muy lindo truco me encantaria usarlo en este blog http://huertaspeuhec.blogspot.com/ pero no tiene las siguentes lineas
div id='content-wrapper
header-wrapper
¿como puedo solucionarlo?

gracias!!!

Rosa

Vero Rodriguez Este efecto es para las plantillas anteriores de Blogger, la tuya es de las del nuevo Diseñador. No sirve, como muchos otros...

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