53

Imagen flotante

Me comenta Marga que le gustaría incluir un calendario que ha visto en "Pour les amoureux de Tilda" a ser posible entre el main (cuerpo de entradas) y la sidebar.
Me dice también que le gustaría que "flotase", es decir, que subiese y bajase cuando hacemos scroll en la página.

[1] En primer lugar hemos de ingresar a la página que hemos mencionado para obtener el código de uno de los calendarios.

[2] Colocamos el código que nos han dado en la web dentro de un div y lo pegamos en un elemento (Gadget) HTML en la sidebar, en la parte superior de la misma, para que cuando hagamos scroll en la página, el calendario se desplace desde arriba de la sidebar hasta el final de esta:

<div id="FloatIcon">
<iframe
src="http://completementblinkies.com/tilda_addict/horloges/tilda4.htm"
width=93 height=136 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0
SCROLLING=no></iframe>
</div>


[3] Vamos a colocar ahora unas líneas en el CSS de la plantilla siempre antes de ]]></b:skin> para controlar la posición del calendario:

#FloatIcon{
position:fixed;
text-align:left;
/*Si la ubicación del calendario no es la adecuada modificar los valores siguientes: */
margin-top:0px;
margin-left:-100px;
}



Nota: 
Podemos controlar la posición del calendario, modificando los valores que se indican en el código.

Si colocamos el código en un elemento sobre las entradas en lugar de arriba de la sidebar, y no modificamos el código CSS, el resultado será que el calendario flotará a la izquierda de nuestras entradas subiendo y bajando a lo largo de estas cuando hagamos scroll en la página:


Ver también:  Menú flotante para el blog.

Entradas Relacionadas:

53 comentarios:


Unknown

hola Rosa!!! leo mucho tu blog y me a ayudado mucho en el mio SCI TERROR me encantaria saber si es posible agrager un "leer mas" dentro de otro leer osea cuando se expande la entrada q quede algo sin expandir y asi,o algun truco para cuando las entradas son muy largas
GRACIAS!!!!!
salutes desde SCI TERROR
H

Unknown

un leer mas dentro de otro leer mas asi es mas facil jajaaj:)

gracias!!!!

MARGA'S HAPPY CRAFTS

Hola Rosa, perfecto a la primera.
Muchas gracias, eres una artista.

Anónimo

hola rosa. queria saber como hiciste para colocar una pequeña imagen delante de la url de tu blog. gracias !!!

Anónimo

mari, mira aquí:
http://elescaparatederosa.blogspot.com/2007/04/favicon-para-el-blog.html

Anónimo

MARGA, de nada. Tu si que eres una artista, solo hay que ver las cosas que haces con la aguja;-)

Anónimo

gracias rosa los he visto y quedan muy lindos, te me adelantaste tambien te iva a consultar, saludos.

Antony

Bueno me gustaría ver el Demo, pero por lo que se ve es muy interesante.
;)

Miguel nev

Hola Rosa
Mira como no me puedo separar de tu blog me lo he llevado con tu permiso
Si ves que no te gusta pon me un comentario y....Gracias por tu labor en ayuda a los que empezamos. xD

Anónimo

Miguel, ja,ja,ja, ya decía yo....¡qué se ha llevado queeee!!!:-)

Anónimo

SALUDOS ROSA!! DESDE ARGENTINA, ESTA VEZ NO VENGO A HACERTE UNA CONSULTA, ESTA VEZ VENGO A PEDIRTE COLABORACION PARA LA BUSQUEDA DE UNA PERSONA. SABEMOS QUE TU BLOG ES MUY POPULAR TANTO ENTRE BLOGGERS EUROPEOS COMO ENTRE BLOGGERS AMERICANOS,. Y YA QUE COLABORASTE PARA QUE ENCONTRARAN A "PELUDO" EL PERRO PERDIDO, PENSÉ QUE QUIZÁS PODRIAS HACER MENCION DE ESTO:

DESDE HACE UNOS DIAS DESAPARECIÓ UNA JOVEN ARGENTINA SIN DEJAR RASTRO, SE SOSPECHA QUE FUÉ SECUESTRADA POR UNA RED DE TRAFICO DE PERSONAS QUE CONTROLA ARGENTINA DE SUR A NORTE, DE ESTE A OESTE, Y QUE OPERA NO SOLO EN EL PAIS SINÓ TAMBIEN EN EL RESTO DEL CONTINENTE COMO EN ESPAÑA Y OTROS LUGARES DE EUROPA, MAYORMENTE SE TRATA DE MUJERES QUE SON SECUESTRADAS PARA EJERCER LA PROSTITUCION EN CONTRA DE SUS VOLUNTADES O PARA IMPONERLES ALGUN OTRO TIPO DE EXCLAVITUD.
LOS FAMILIARES Y AMIGO DE ESTA JOVEN EN CUESTION LLAMADA JOANA, FUNDARON UN BLOG PARA AYUDAR A LOCALIZARLA, ASI CONSIGUIERON SALIR EN LOS CANALES DE NOTICIAS DEL PAIS Y EXPANDIR LA BUSQUEDA CON LA AYUDA DE TODOS LOS INTERNAUTAS.

ESTE ES EL BLOG:
http://buscandojoanacontreras.blogspot.com/


MAS INFO:
http://www.taringa.net/posts/solidaridad/1748263/Urgente!!!!---Buscamos-a-Joana.html


AGRADECERIAMOS MUCHO TU AYUDA ROSA, DESDE YA GRACIAS Y SALUDOS

( Puedes contactarme en mi correo : lheonnel@live.com.ar )

Anónimo

Hola!

Rosa tengo un problema, el codigo no lo tengo, (el segundo que habia que buscar) tengo uno similar pero con dos o tres letras distintas. ¿QUE SE PUEDE HACER? TE RECUERDO QUE TENGO UNA PLANTILLA DEMIN

Anónimo

MAS INFO:http://www.fundacionmariadelosangeles.org/esp/home.htm

Unknown

Hola me gustaria perguntar si es a mi solo o a alguien mas le pasa, ya hace dos dias que no me deja editar la plantilla de blogger, cada ves que realizo un cambio al poner "vista previa" me aparece un error. y se me cierra todo. Y lo peor de todo es que mi plantilla se modifico sola y el titulo y la imagen que tenia en el final se me movieron, la sidebar se me corrio de costado, la verdad se me hizo un desastre y estoy desesperado y nose que hacer.
POR FAVOR NECESITO AYUDA!!!!

Anónimo

me encanta tu blog realmente es muy util rosa, me soluciona la vida en muchas oportunidades y cada vez que me surge una duda no vacilo en consultarte, GRACIAS.

Anónimo

Cristian , ¿pero de que código hablas? Me has dejado el mismo mensaje en dos entradas distintas y no se de que estás hablando...

Anónimo

posicionamiento, ¡Muchas gracias!:-)

Anónimo

MaX, nadie más me ha comentado algo parecido...
Si puedo decirte, por ejemplo, que hoy no he podido trabajar en mis blogs de pruebas...a mi no me daba error, de hecho me guardaba los cambios, pero al ver el blog después de guardados los cambios no se habían hecho y todo seguía como estaba...llevo así todo el día de hoy...

Anónimo

Estimada Rosa, ¿Qué tal?. Espero que bien. Suelo seguirte muy a menudo y quisiera que me ayudaras con una cuestión. He instalado una nueva plantilla en mi blog, la blogy insense, y resulta que los iconos de la sidebar han desaparecido y al cargar la página, en la barra de abajo del todo me pone "listo pero con errores en la página". ¿tiene relación una cosa con la otra?, ¿cómo hago para que se vean los iconos?. Gracias. Un saludo

Unknown

Qué cosas tan bonitas nos enseñas Rosa, lástima que no tenga espacio para ponerlo.... lo he probado pero me temo que apenas tengo margen para incluirlo. De todas formas siempre se agradece aprender cosas nuevas.
El otro día no podía enviar comentarios, no se que debió pasar
Un besazo muy grande :-L

Anónimo

gracias Roas, lo habia visto en varios blogs ya pero no me dedcidia, aunque me gustaba, saludos.

Anónimo

Javi, supongo que me estás hablando de IExplorer...es el que hace ese tipo de cosas.
Los iconos posiblemente estén en formato .png y por eso IE no los muestra y el "listo con errores..." también pasa en mi blog con IE si te fijas, y no tiene que ver con las imágenes, sino con algún script que usa la plantilla y al IE no le "da la gana" de mostrar:-)
Yo no puedo prescindir de esos códigos, así que he decidido hace tiempo "ni caso" a IE.

Anónimo

Adrián, muy buena decisión! No deberíamos dejarnos llevar e incluir todo lo que vemos en el blog...

Anónimo

¿Cómo puedo poner una valoración de comentarios de este estilo http://www.luissolana.com/?

Un saludo Rosa. topoalk@hotmail.com

Anónimo

Anónimo (la próxima vez procura no serlo:-))
Ese sistema es el que puede obtenerse en esta web:
http://www.outbrain.com/get/ratings

Jaime Trujillo Escobedo

Lo probé en uno de mis blogs y va genial, la verdad es que te felicito por el truco Rosa, es muy bueno, y la imagen me gusta mucho :)

Anónimo

Rosa, he seguido usando cosas tuyas pero ya sin darte la lata jajaja que soy pesada, que si que lo se.

He toquiteado tanto la plantilla que me acabo de dar cuenta que ha desaparecido el espacio entre "etiqueta" de cada entrada y la línea divisoria entre entradas de texto! está pegadito y feo!
cómo le puedo dar un espacio? si juraría no haber tocado nada de eso!

Estoy mirándome todas las entradas del escaparate, algún día llegaré a la primera... aunque hay muchas cosas que no me salen. pero vamos, vamos progresando jajaja.

Gracias! hoy estarás a tope de currelo! no tengo prisa!

Anónimo

Jaime, gracias corazón:-)

Anónimo

Maite, en esta parte de la plantilla:
.post-footer {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;

Ponle el valor que quieras de distancia en padding-bottom: 0;

Anónimo

Qué rapida eres! una máquina! GRACIAS!

Anónimo

Creo que ya se lo que ha pasado, he hecho los titulos expandibles de las etiquetas y he bajado la separación entre ellas, tengo ésto

.post {
margin-top: 0;
margin-$endSide: 0;
margin-bottom: 1.5em; EN VEZ DE 0.1
margin-$startSide: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 1.5em;
padding-$startSide: 14px; EN VEZ DE 0.1
border-bottom: 1px solid #ddd;
}

será por eso que cuando le doy al padding-botton otro valor no me hace nada?

Anónimo

Maite, tienes el .post-footer { porque yo lo veo desde el código fuente de tu blog...

Anónimo

Claro claro que lo tengo, pero no cambiaba. He puesto valor 1 en vez de 1.5 y ahora sale más separado y las etiquetas extendidas más anchas pero no importa, me conformo asi si no hay otra manera.
Estaba justo ahora haciendo los cambios. Nos habremos cruzado!

Voy a volver a una sola sidebar, espero no darte mucho la lata. :-L Gracias gracias

Sergio

Hola rosa, gracias a tu blog, mi blog http://zitromovil.blogspot.com a sido mejorado considerablemente.

Y sobre el tema de la imagen flotante hace muuuuuuuuuucho tiempo que lo andaba buscando. Ahora lo intentaré poner, y supongo, que como todo lo de tu blog, me funcionará OK!

PERO, me gustaría saber si hay alguna posibilidad de poner un imagen en la esquinita de la imagen flotante en forma de X para poder desactivarla, ya que es posible que a muchos usuarios les puede incomodar... y así puedan cerrar la imagen flotante si lo desean. O si no puede ser una imagen, pues un enlace de texto que ponga... cerrar. Y automáticamente se cierre.

Muchas gracias de antemano y espero que resuelvas mi problema!

No se si me he explicado correctamente...

Anónimo

ZitrO, no con este sistema.
Conozco la forma de hacer eso que dices si entendí bien...es muy largo para ponerlo en un comentario, cuando pueda tal vez haga una entrada al respecto.

Anónimo

H, no se si servirá pero podrías probar esto:
http://elescaparatederosa.blogspot.com/2007/11/mostrar-y-ocultar.html

tag

Acabo de descubrir tu blog, y me encanta, porque yo soy una novata ignotante y tu eres una enciclopedia viviente.
He abierto un blog en mayo de este año, y voy aprendiendo a hacer cositas, aunque a veces las hago, y luego, cuando lo intento otra vez, ya no me acuerdo de como lo hice.O no me sale igual y no entiendo por qué.
Tengo una portada standar, de las que ofrece blogger.
Como no entiendo el ingles, no se hacer muchas cosas que me gustaria saber hacer.
Estoy leyendo tus consultas para ver si me aclaro, pero me gustaria que me dijeras como puedo poner un dibujo temporalmente, por ejemplo, ahora para Navidad, me gustaria poner un arbolito o unas velas, pero de esos que tienen movimiento,
¿me lo podrias explicar, como si fuese yo un parvulito?
Muchas gracias.

Anónimo

tag, sabes tengo una entrada guardada en "borradores" precisamente con algo de esto muy fácil de poner...se me quedó ahí desde el año pasado :-) pasó la Navidad y no la publiqué :$

Anónimo

tag, ja,ja, que se me olvidó xd...enseguida la publico.;-)

Begoña

Hola Rosa,
Mi pregunta hoy es como puedo hacer para que las parte de la dcha de mi blog, los gadgets, salgan en el medio de la columna y no a un lado... y tb como separar cada gadget con un dibujito.
Gracias

Anónimo

Ya te avisé de que soy novata e ignorante, y no te estaba engañando.
No he entendido tu respuesta.
¿Donde publicas eso que tenias guardado en borradores?
Dimelo, porfa, me hace ilusión

Anónimo

Begoña, tienes que cambiar en el código alguna cosilla para poder hacer eso.
Localiza esto en tu código:
.sidebar .widget, .main .widget {
border-bottom:1px dotted #E895CC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Tienes que separarlo en dos ya que ahí están juntos las entradas y la sidebar y si no los separas los cambios afectaran a los dos, tendrá que quedar así:
.sidebar .widget{
text-align: center;
border-bottom:1px dotted #E895CC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted #E895CC;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Dentro del widget de la sidebar (el primer código) ya he incluido el "text-aling: center;" para que los widgets se centren.

Esa otra línea que ves que dice "border-bottom:1px dotted #E895CC;" es la línea de puntos que separa los widgets por si la quieres eliminar...

Para poner un dibujo como dices entre cada widget, habría que hacerlo directamente dentro de la plantilla, colocando la imagen así:
<img align='center' height='80' src='URL DE LA IMAGEN' width='170'/>
width= ancho de imagen, height= alto de imagen

Tendrías que ponerla entre la línea que marca un widget y el siguiente, una línea que es parecida a esta:
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
Cada línea de esas es un widget (se ve sin expandir artilugios).

Anónimo

tag, no está publicada, "borradores" son las entradas preparadas pero que aún no han sido publicadas.

sabe

Hola Rosa! Solo quería agradecerte que compartas tus amplísimos conocimientos. Acabo de hacer un blog y todo las pequeñas cosas que he conseguido ha sido gracias a ti.
Muchas gracias por todo!

Anónimo

sabe, gracias a ti ;-)

Anónimo

bueno esta buena la idea de las imagenes flotantes, pero personalmente a mi me genera cierto estres ver una imagen siguiendome por todos lados. lo siento algo molestoso... su uso solo debe ser suando cuando sea muy importante... bueno eso opino como usuario...

Anónimo

imagenes, y estoy de acuerdo contigo ;) como usuario, pero como admin del Escaparate, he de explicar lo que me solicitan...
Un saludo y gracias por opinar!

FILÁ NOSOTRAS

Hola rosa estoy ota vez aqui (me enganchas)puse la imagen flotante pero una que tenia y y me sale todo pero no se me ve la imagen ¿tiene que ser de esa pagina concreta mente?

Anónimo

NOSOTRAS, puedes usar cualquier imagen, pero entonces lo harías simplemente así:

<div id="FloatIcon">
<img src="url de tu imagen">
</div>

Un Perro

Hola Rosa !!
Bueno es zafra de cambios y enrosques con blogs, me dedico a armar un blog sobre un fotógrafo de Pamplona muy ligado a los Marea.
Pues descargue una plantilla muy linda en cuanto a utilidad y diseño para esto, pero tengo un problema con los "slides" que tengo agregados hasta ahora en las entradas, los álbumes de fotos en forma de presentación, estos quedan de alguna manera por fuera de la entrada en la pagina principal, me vengo hasta aquí para plantear esto pues he leído que se puede deber a algo así como los "Frames" que quedan por encima de todo en el blog, como pasa con los vídeos añadidos,
Existe alguna manera de configurar esto para que la pagina principal quede prolija ?
Te dejo la dirección del niño en crecimiento.
Foto Lezaun
Un beso grande Rosa y que estés bien

Un Perro

ups..corrección
http://fotolezaun.blogspot.com

Anónimo

Un perro Uffff, la plantilla del millón...resuelves un problema y le sale otro...

¿Has intentado reducir el ancho y alto del código de los slides?:
width="500" height="400"

Un Perro

jajaja con eso me has dicho todo, la estaba revolviendo y me di cuenta que lo que tiene de vistoso lo añade en complicaciones.
Ya estoy buscando un nuevo diseño, de todas formas probare con cambiar la medida de los slides.
Un beso y gracias Rosa !!

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

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.

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