Por alguna extraña razón nos atraen las imágenes flotantes en el blog, si agregas una que se adapte al diseño de tu plantilla se verá muy bien. Pero no sé si a ustedes les pase, yo he entrado a muchos blogs que tienen estas imágenes flotantes y en ocasiones tapan demasiado el contenido de la sidebar, por lo que tengo que hacer malabares para poder leer lo que hay detrás de la imagen flotante. Eso puede ser bastante molesto y frustrante por no poder leer con claridad el contenido que hay detrás de la imagen.
Haciendo unos experimentos encontré la forma de poder dar la opción de cerrar la imagen, a modo que si el lector siente que la imagen le estorba podrá cerrarla tranquilamente.
Puedes ver un ejemplo en este blog de pruebas, en la parte inferior derecha verás la imagen flotante que tiene un pequeño ícono para cerrarse.
Para agregar esta imagen flotante con opción de cerrar entra en Plantilla | Edición de HTML y antes de </head> pega esto:
<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}
function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_imagen").style.visibility = "hidden";
}
//]]>
</script>
Luego antes de </body> pega lo siguiente:
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigd6D5UJ17brlCn-K5EWDXvsJCTX5Fs7-CTWWObdpt0CIbbgTWErNY8JB2J5_jD4z-zfw3wiOmfv0wHNAJvOpOyM3UDr_zw-KpnMMQUze0Dxa-rHeq56W98ybsDXJyTCb4kdXKkI5Dyhw/s200/iconClose.gif'/>
</div>
Por último pega antes de ]]></b:skin> esto:
#ftr_imagen {
background: url(URL de la imagen flotante) no-repeat;
bottom: 0px;
right: 0px;
width: 128px;
height: 128px;
position: fixed;
}
.close {
float: right;
padding-right: 10px;
cursor: hand;
cursor: pointer;
}
Ya sólo agrega la URL de la imagen flotante donde se indica y en donde dice width cambia el ancho de la imagen y en height el alto.
De esta forma podrás tener una imagen flotante en tu blog que no le estorbará a nadie.
Hola Potro!!!
ResponderEliminarde México bien :)
Es como la que tenías hace unos días para la fiestas??? quedaba genial, mucha razón son molestas esas que ocupan parte de la sidebar.
Saludos!!!
Hola Graciela,
ResponderEliminarEs algo parecido, la que puse para las fechas navideñas es un mensaje tipo post it, sólo que en lugar de poner un mensaje puse una imagen.
Saludos!
Gracias potro! Justo lo que nesecitaba.Saludos.
ResponderEliminarServido ;)
ResponderEliminarClaro Joel, a ver si esta semana lo publico.
ResponderEliminarSaludos.
No había visto esa entrada, muy buena Potro :D
ResponderEliminarSaludos!!!
Gracias =)
ResponderEliminarSaludos!
Sale esta Buena una vez la bi en un blog
ResponderEliminarpero jamas supe como
aun no tenia muchas ideas sobre el HTML
Muy Bueno 10
Ignoro qué método hayan usado en ese blog, hubiera sido bueno verlo para tener otra opción con el mismo resultado ;)
ResponderEliminarEste truco tiene el "plus" que faltaba para marcar la diferencia y potenciarse respecto a las anteriores imágenes flotantes.
ResponderEliminarEspectacular Potro.
Saludos.
Jpz.-
Eres genial ¿Seria rizar el rizo si fuera una imagen distinta cada vez que se refresca la pagina y aparece la nueva imagen?
ResponderEliminarSeria total. Enhorabuena!!!!!!!!!!
Jpz, coincido contigo, me parece que esta opción es la más adecuada para muchos. Saludos!
ResponderEliminarSpaceboxing.com, dudo mucho que se pueda combinar este junto con las imágenes flotantes aleatorias por aquello de que ambos funcionan con scripts diferentes, si alguien se anima a intentarlo que nos platiquen los resultados. Saludos!
Estimado Potro
ResponderEliminar¿Cómo se podría hacer para que esta imagen flotante tenga un hipervínculo hacia otra web?
Hola Luis Miguel Armas Moreno,
ResponderEliminarEncierra el segundo código entre <a href="URL del enlace"> y </a>
Remplaza la URL del enlace y listo.
Saludos.
No entiendo cómo es eso de encerrar. Me podrías poner un ejemplo. Gracias El Potro.
EliminarAsí:
Eliminar<a href="URL del enlace">
<div id='ftr_imagen'>
<img border='0' class='close' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/s200/iconClose.gif'/>
</div>
</a>
hola potro quisiera saber si sabes sobre codigos con iframe si se puede achicar las medidas para k encaje con el tamaño de la entrada
ResponderEliminarHola mirla milagros,
ResponderEliminarAgrega al código del iframe lo que está en negrita:
<iframe src="URL del iframe" width="450" height="200" scrolling="yes" frameborder="0"></iframe>
Saludos.
Potro, lo de para poner hipervinculo no funca, chekealo. Saludos
ResponderEliminarDe que funciona funciona, hay que ponerlo como lo he dicho.
ResponderEliminarSaludos.
Hola potro! estoy buscando la manera de hacer una barra-menu flotante y estatica, asi como lo tiene el moma en la parte de abajo, tipo facebook o ese servicio de wiribuya (bueno ese ya es bastante complejo. Algo simple, personalizable y com opciones de menu asi--->http://www.moma.org/
ResponderEliminarGracias, ójala se pueda incorporar a blogger.Saludos
Algo muy simple sería poner el código básico de una imagen flotante y agregar ese código por cada imagen de menú que quieras. Para que no queden encimados cambia en el código donde dice left:0; por left:20; luego en otro código lo cambias por left:40; y así sucesivamente.
ResponderEliminarSi quieres algo más elaborado puedes ver el tutorial de JMiur: http://vagabundia.blogspot.com/2009/08/crear-una-barra-de-herramientas-para-el.html
Saludos.
y hacer todo eso con un enlace??
ResponderEliminar¿A qué te refieres?
ResponderEliminarque la imagen fotante, cuando le demos click
ResponderEliminarvalla a una pagina, mas Especifico, Que la Imagen
con Opcion de Cerrar Tenga un Enlace.
¿Como le Hacemos?
En el comentario #15 está el código que se debe usar para que la imagen tenga un enlace.
ResponderEliminarSaludos.
Una preguntota!
ResponderEliminarSe pueden poner dos imagenes flotantes, una en cada esquina, es decir, en la parte inferior izquierda y derecha?
Está un poquitín complicado porque se tienen que modificar algunas partes de los tres códigos :S
ResponderEliminarpero entonces si se puede, no??
ResponderEliminarDebería de poderse. Intenta haciéndolo así:
ResponderEliminarPega de nuevo los códigos, luego en el primer código busca todo lo que diga ftr_imagen y cámbialo por ftr_imagen2, haz lo mismo para los otros dos códigos.
Luego busca en el primer código todo donde diga closeTopAds() y cámbialo por closeTopAds2() haz lo mismo para el segundo código.
Saludos.
men agregue lightbox y s3slider y s3slider no me funciona pero cuando borro el codigo de lightbox me empieza a funcionar que hago¿???
ResponderEliminarNo son compatibles, tienes que elegir uno de los dos o probar otro estilo de ventanas modales como Shadowbox.
ResponderEliminarhola Potro, disculpa que te moleste pero tengo una dificultad al colocar el tercer código :S,
ResponderEliminarno encuentro esa frase que das "]]>"
cabe destacar que no la estoy ocupando en un blogger, si no que en una web, html, gracias de antemano
Dentro de los estilos CSS de tu sitio web se pondría, aunque nunca he probado los trucos en sitios Web.
ResponderEliminarHola potro, te felicito por tu blog, me ha ayudado increiblemente.
ResponderEliminarHablando del codigo ya lo instalé -la imagen- en mi blog, pero me gustaría poner otra imagen flotante arriba de la que ya tengo puesta, podrías ayudarme? mi blog es http://opifutmex.blogspot.com
un saludo y gracias.
Con este es complicado porque prácticamente hay que hacer otro script y cambiar los datos. Si fuera sin la opción de cerrar sería mucho más fácil.
ResponderEliminarSi, en realidad no me interesa mucho la opcion de cerrar, podría ser menos complicado que me ayudaras con lo de la imagen flotante sin la opcion de cerrar? o sabras de algun sitio donde encontrar el script, si es que no tienes mucho tiempo para poder poner el codigo.
ResponderEliminarUn saludo
El script es este mismo que se muestra al inicio de la entrada sólo que se le tendrían que hacer modificaciones.
ResponderEliminarSi quieres una imagen flotante sin la opción de cerrar mira esta entrada, sólo cambia donde dice bottom:0; por bottom:150px; eso hará que quede arriba de la otra imagen
Muchas gracias potro, si alguna vez necesitas ayuda con el retoque de diseño de algun template, puedes mandarme un mail, talvez te pueda ayudar.
ResponderEliminarun saludo
Te lo agradezco ;)
ResponderEliminarHola encatantado de saludarte, quiero saber si puedo colocar otra ventana flotante, es decir tener dos pero al otra en otra posición quizas como la tuya que indica que estas de vaca que salga ahí, cómo hago. Gracias por tus aportes me ha funcionado mucho
ResponderEliminarLa que yo tengo puesto de mensaje de vacaciones es este método, seguro no tendrás problemas para combinar ambos, ya que usar el mismo dos veces como mencionas es bastante complicado.
ResponderEliminarbuen día primero darte gracias por tu aporte y segundo saber si hay alguna forma que la imagen aparezca una sola vez es decir en el primer pantallazo y luego de abrir otro contenido en el blog no se siga abriendo... gracias
ResponderEliminarQuizá usando cookies, pero sobre ese tema no sé :\
ResponderEliminarHola me encanta todo lo que pones en este blog!! Y me gustaria tambien pedir q pongas como hacer para q deje un mensaje de aviso asi como hace en este sitio http://help.adobe.com/pt_BR/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7e89a.html abajo hay un ejempo que se queda visible y oculto pero no desaparece (< >) mira bien y dime como se hace eso, es mas o menos como este truco que acabas de mostrar!
ResponderEliminarGracias
Nunca lo he hecho pero tengo una vaga idea. Deja que tenga un poco de tiempo para hacer unas pruebas y ver si funciona. De ser así lo publico en el blog para compartirlo.
ResponderEliminarSaludos.
Buenas Potro, acabo de descubrir este blog y.. oh, dios.. no sabes cuanto me está ayudando.. xD
ResponderEliminarAhora mismo ando tocandole la moral a un amigo, haciendole una lista de cosas que quiero que me meta, y los links son de aquí, jeje.. esque yo y el HTML y los codigos así.. va a ser que no los domino.. >___
La pregunta que te queria hacer (Que si no me enroyo mucho..)
¿Hay alguna forma de hacer que esa imagen flotante vaya rotando? Es decir.. que hayan 3 o 4 y con cada "F5" se vea una distinta, como lo de las frases..
Muchas gracias! ^^
Hola Kora,
ResponderEliminarBienvenida a Ciudad Blogger :)
Es posible hacerlo pero no tendría la opción de cerrar. Puedes ver cómo se hace en esta entrada:
http://ciudadblogger.com/2010/01/imagen-flotante-al-azar.html
Saludos!
Quedó muy bien :) gracias!!!
ResponderEliminarMuchas gracias Potro ^^
ResponderEliminarxever potro me salio bien pero tuve ke modificar algunas cosas del css el fixed cambiarle x el absolute; js ponerle en un archivo aparte .. eso ya es kuestion de kada uno pero graxias de toas maneras me salio lo ke taba buscando... si no juera x ese codigo me kolgaban en mi work jeje bendixiones man
ResponderEliminarhola potro te cuento estoy indio con esto... hice todo lo que no encuentro es la bendita URL de la imagen flotante como la consigo, en donde, en que parte de la imagen se encuentra..... espero tu pronta respuesta jaac_michael_2010@hotmail.com
ResponderEliminarSi ya subiste la imagen a la red entonces dale click con el botón derecho y selecciona alguna opción que diga algo como 'Copiar dirección de la imagen', esa es la URL.
ResponderEliminarDepende qué sea lo que quieres cambiar, hay partes de las plantillas que sólo funcionan en algunas plantillas por el tipo de estructura que tienen.
ResponderEliminarBravo!!! justamente esto estaba buscando
ResponderEliminar(^w^)b
ResponderEliminarbatalle un pokito
pork la imagen k puse estaba grande xD
pero ya, :D un saludo
Gracias en verdad muy bueno
ResponderEliminarHola Potro, tu blog me ayuda demasiado y quiero agradecerte infinitamente, me gustaría que la imagen no pueda cerrarse, sacar el cuadradito con la "X" como hago eso?
ResponderEliminarHola Alex,
ResponderEliminarAl inicio de la entrada hay un enlace, ahí está la información para poner una imagen flotante sin opción de cerrar.
Saludos.
Hola Potro, en mi blog no se cierra la imagen, lo he intentado de mil maneras, pero no se cierra, es como si hubiera dos imágenes ¿sabrías decirme por qué es?
ResponderEliminarPues tal vez podría decirte si al menos supiera en cuál blog tienes el problema, pero sin saberlo no podría siquiera adivinar :/
ResponderEliminarjajaja, perdón!, fue un lapsus. Es este http://miraquiencotillea.blogspot.com/ Es de un amigo y yo me encargo de estas cosas... por cierto, Gracias, por que como podrás observar, casi todo lo que hay en el blog, lo he sacado de este. GRACIAS. Y eso, no sé por qué me falla la imagen... Muchas gracias por contestar!
ResponderEliminarGracias :)
ResponderEliminarEntré a tu blog y veo que tienes repetidos los códigos, tanto el primer código como el segundo. Elimina esos códigos repetidos para ver si eso soluciona el problema.
Saludos!
Muchas gracias!!!!, ya lo he solucionado!. Eres lo más!, de veras muchas gracias.
ResponderEliminarSaludos!
Probablemente poniendo el iframe debajo de:
ResponderEliminar<img border='0' class='close' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/s200/iconClose.gif'/>
Aunque nunca lo he intentado con otro elemento que no sea una imagen.
hola porfavor como puedo ponerle un enlace a la imagen flotante no puedo hacerlo
ResponderEliminarHola perunatural, mira el comentario #15, ahí están las indicaciones.
ResponderEliminarMuchisimas gracias por el codigo lo implemente en mi blog y quedo genial..
ResponderEliminarPotro, ¿Como puedo hacer para ingregar un widget a una ventana flotante?. Lo que me gustaria hacer es ingresar el wigget de mis actualizaciones de Facebook en una ventana flotante..
Te agradezco de antemano por la ayuda
Y SI QUIERO PONER UN CODIGO HTML??
ResponderEliminarNarugami,
ResponderEliminarSólo necesitas localizar el ID del gadget, luego antes de ]]></b:skin> pega esto:
#ID {
bottom: 0px;
right: 0px;
position: fixed;
}
Donde ID es la id del gadget que quieres poner flotante.
๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜJosε ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜŞцgoi , es el mismo procedimiento que acabo de explicarle a Narugami, crea tu gadget y sigues esos pasos, sólo que el gadget NO tendrá la opción de cerrarse.
ResponderEliminarNo encuentro donde poner el 3er codigo, no hay skin
ResponderEliminarUsa las teclas CTRL + F para localizarlo.
ResponderEliminarHola, El Potro ^^
ResponderEliminar¿Puedo usarlo de alguna manera en el chat "flotante" que hice el otro día?
Hola Gabriella, no he entendido bien, ¿cómo lo quieres usar con el chat?
ResponderEliminarPerdón. Quise decir si podía ponerle al chat flotante la opción de "cerrar" como en este caso, para que no estorbe.
ResponderEliminarO sea, incluirle al script el código necesario para que el chat flotante también tenga la opción de cerrar.
Me temo que no :(
ResponderEliminarYa me parecía... snif... :( XD
ResponderEliminarHola Potro, crees que hay alguna manera de hacer una imagen flotante, pero que en este caso necesito que sea estática en un lugar, pero con la opción de cerrar.
ResponderEliminarCon lo de estática me refiero a que no se mueva con la pagina, pues pienso utilizarla para invitar a los usuarios a compartir los post, bueno espero que me hallas comprendido, que tengas un buen día.
Hola Haniel,
ResponderEliminarQuizá no viste el demo o la entrada completa porque de hecho esta entrada explica cómo poner una imagen estática con opción de cerrar.
Buen día.
Potro, creo que no me comprendiste, para que me entiendas mejor visita este post: http://www.pizcos.net/2011/11/recupera-tus-compartidos-y-sigue.html, como notas al entrar aparece una imagen que dice "Recuerda compartir el articulo", la cual se desvanece, pensando un poco me di cuenta que se puede hacer lo mismo con una imagen flotante, con la opción de cerrar, por eso me refiero a una imagen flotante estática, que no se corra con la web.
ResponderEliminarEspero que me hallas comprendido, y gracias por tu ayuda.
Pues esa no es flotante porque si bajas al scroll esta no queda estática.
ResponderEliminarSi quieres a esta misma le puedes quitar el position:fixed; para que deje de ser estática, y el código que va antes de </body> lo pones después de:
<div class='post-header-line-1'/>
Eso hará que la imagen se muestre debajo del título del blog, pero dejará de ser flotante.
buenas potro, ya estoy otra vez para hacerte preguntas ;)
ResponderEliminarno se si con esto se podrá pero lo que busco es poder poner anuncios encima de mis vídeos con la opción de que puedan cerrarse como se ve en esta web.
http://animeid.com/ver/one-piece-503.html
Hola AnimeXtremo, siento no poder ayudarte en eso, pero mostrar publicidad de esa manera no está permitido casi para ningún sistema publicitario. Saludos.
ResponderEliminaramigo como puedo reducir la barra de desplazamiento para ingresarle un barra de reproductor a mi blogger?
ResponderEliminarNo he entendido bien Williams, ¿me podrías dar más detalles?
ResponderEliminarPotro: Como hago una ventana de este tipo, pero sin imagen y con un mensajes escrito?, como el que tenias vos cuando te fuiste de vacaciones.
ResponderEliminarGracias de antemano.!
El que tenía yo puesto es este:
Eliminarhttp://ciudadblogger.com/2011/09/caja-de-aviso-para-el-blog-con-opcion.html
Saludos.
Muchas gracias por esta ayuda, me ha servido de mucho!
ResponderEliminarQué gusto que así haya sido :)
EliminarPotro, me encantan tus tutos, estoy aprendiendo mucho y lo adapto a mi web(no blog).
ResponderEliminarMe gustaria saber como poner esta imagen flotante pero en vez del boton cerrar que se cierre sola en 10 segundos por ejemplo, saludos.
Naimerz
Muchas gracias Leonardo, aunque te voy a deber lo que pides, no conozco un script que lo haga, aunque seguro debe existir.
EliminarSaludos.
Disculpa, use este método y me salio todo bien, pero cuando entro a cualquier entrada o sección de mi blog, vuelve a aparecer la imagen y toca volver a cerrarla y así. Hay alguna forma de que solo aparezca en HOME o que cuando se cierre no vuelva a aparecer la imagen?
ResponderEliminarPuedes hacer que sólo aparezca en la portada, pero no tiene cookies así que siempre aparecerá en la portada:
Eliminarhttp://ciudadblogger.com/2010/03/condicionales-de-blogger.html
y como puedo hacer para poner un anuncio en javascript?
ResponderEliminarPuedes probar poner el código del anuncio después de esta parte:
Eliminar<img border='0' class='close' onClick='closeTopAds();return false;' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0jtqeCcWUI/AAAAAAAADkA/qLZkUMRn7FU/s200/iconClose.gif'/>
Buenas noches, sr. Potro, yo quiero colocarlo al lado izquierdo pero no puedo, eh intentado varias veces pero no eh logrado hacerlo, me puede decir que es lo que tengo que hacer?
ResponderEliminargracias por su ayuda, Saludos
Hola Julio Cesar, sólo hay que cambiar el right: 0px; por left:0px;
EliminarHola, una pregunta esto lo puedo usar en una web (no blogger) y si es asi donde pego lo ultimo, porque no encuentro esa linea
ResponderEliminarSí se puede poner en una página web. Los dos primeros pasos son los mismos, el primer código va antes de </head> y el segundo antes de </body>
EliminarEl tercer código ponlo en los estilos CSS de tu plantilla.
Saludos potro:
ResponderEliminarTengo mi web en pwg pero no encuentro la etiqueta esta: antes de ]]>
ayudame por favor es el unico paso que me hace falta....
espero respuestas
Saludos Jesus. Da click en la flechita que está junto a <b:skin>...</b:skin> ahí encontrarás esa etiqueta.
EliminarSaludo potro:
EliminarLa verdad es que se muy poco de esto, podrias indicarme los pasos a seguir para lograr introducir este codigo de forma correcta, le agradezco escriba a mi email: jesusalexisdj@gmail.com
agradezco pronta respuesta
Gracias
Saludos potro:
EliminarLa verdad es que no entiendo mucho la forma de introducir este codigo en mi plantilla de pwg, no se como aplicar los cambios...... le agradeceria si pudieras escribir a mi correo: jesusalexisdj@gmail.com
indicando los pasos para el proceso, ya que no he podido encontrar la etiqueta y no se como pegar el codigo ni guardar cambios..
agradezco pronta respuesta
gracias....
Hola Jesús, el procedimiento que te explicaría es el mismo de esa entrada, no hay otra forma de hacerlo.
EliminarPara encontrar los códigos da click dentro del área de los códigos, luego presiona las teclas CTRL + F.
Saludos.
Hola Potro, hay alguna posibilidad de que solo salta la imagen una vez al dia o que solo salte en una pagina en concreto del blog?
ResponderEliminarSólo si usaras cookies, pero yo de eso no sé nada :(
EliminarY si no quiero usar una imagen, si no un contenido html? Asi como esos cuadros que salen donde tienen lo de sus redes sociales, pero puedes cerrarlo
ResponderEliminar