**ACTUALIZACION: PULSA PARA VER MAS BURBUJAS Y SUS CODIGOS**
Para los que querais que en vuestros blogs al pasar por encima de un link aparezca un "bocadillo" con la pagina web a la que esta enlazada (similar al menu de la derecha de mi sidebar) podeis usar este codigo que he creado especialmente para blogger ya que todos los codigos que he buscado por la red, no funcionan en blogger.
Veamos un ejemplo:
Como veis al pasar por encima el cursor os sale una cosa llamada Burbuja, con la captura dentro. Esto se consigue gracias a varias partes de codigo.
1. Empecemos por el css o style. Esto debe ir donde se encuentran los estilos de tu blog. Para encontrarlo: Diseño > Edicion HTML y buscas o las etiquetas de style o buscas codigos similares al siguiente, y debes copiar y pegar.
.img_snap{
float: right;
position: absolute;
width: 243px;
height: 195px;
background: url('http://forintheflies.diinoweb.com/files/BUBLE/lb.png') no-repeat;
}
Puedes alojar tu propia imagen de burbuja en DrUpload, o similares. O puedes copiar esta (boton derecho > guardar imagen...)
2. Codigo javascript. Deberas copiar este codigo antes de la etiqueta <head>. Este codigo es el nos ayudara a que aparezca y desaparezca nuestra burbuja.
<script> function show_div(div_id) { document.getElementById(div_id).style.display = 'block'; } function hide_div(div_id) { // hide the requested div document.getElementById(div_id).style.display = 'none'; } </script>
3. Links. Finalmente (y esta es la parte mas dura de todo). Para cada link debemos copiar el siguiente codigo y seguir bien las explicaciones que citare mas abajo.
<a onmouseover="show_div('CHACHIROPA');" onmouseout="hide_div('CHACHIROPA');" href="http://www.chachiropa.com" target="_blank">Visita Chachiropa.com</a>
<div id="CHACHIROPA" style="display: none;" class="img_snap">
<img id="marco" style="z-index: 3;position: relative; top: 28px; left: 25px;" src="http://images.websnapr.com/?size=s&url=http://chachiropa.com/"/>
</div>
Como se puede ver en el codigo he marcado en negrita 7 cosas. Pues bien, ahora lo que teneis que hacer es cambiar esa parte por la web que querais.
Si no os quedara ajustado, se "saliera" la captura o algo similar debeis ajustar el top: 28px; en el caso de sidebar yo lo tengo ajustado a 28px, pero en los post a 16px asi que puede variar de un blog a otro.
Podeis ver que 3 de las cosas marcadas en negrita son: CHACHIROPA. Este es el identificativo del link con el que haremos que se vea nuestra burbuja. Es muy importante que por cada link cambie de nombre y sean los 3 iguales. El nombre no importa, puede ser el que querais.
Luego tenemos 2 URLS de la pagina a la que queremos linkar, pues evidentemente ahi tenemos que poner la pagina web que necesitemos.
Y en la ultima cosa marcada simplemente el mensaje que se mostrara del link.
*Si se encuentran duplicados los nombres identificativos no funcionara correctamente*
* La preview se genera automaticamente gracias al servicio de Websnapr.com*
Pensare en un futuro en hacer una web con esta utilidad y con la que simplemente tengais que copiar y pegar el codigo. Pensare en ello ;)
Si teneis algun problema o duda los respondere encantada.
*PREGUNTAS DE MALINA*
P: ¿Vale ponerlo en cualquier etiqueta style?
R: Si, dentro de la etiqueta, junto con el resto del codigo css
P: ¿Porque en tu sidebar algunas capturas tienen marca de agua y otras no?
R: Porque en las que no, las capturas estan hechas por mi. Tambien puedes crear tus propias capturas o imagenes y ponerlas en lugar de la captura automatica. De hecho nisiquiera tiene porque ser solo para enlaces, puede ser para palabras en las que salga una imagen explicativa sin mas...
7 comentarios:
Saludos,
Muchas felicidades, yo también soy blogger, y te felicito porque tiene muy buena pinta lo que estas haciendo.
Pasare a verte a diario.
Un beso
Hola! ya puse burbujitas en http://amigosdemirimiriygatchan.blogspot.com
xD ojalá me haya quedado bien sensei Mimi! jeje, un abasho :P q estés bien!
Hola, he estado probando para incluir los shots en mi blog (actualmente tengo snapshots en algunos enlaces, pero la carga de la previsualización es muy lenta y quiero cambiar), no sé que es lo que hago mal, pero no me funciona.
Tengo el nuevo blogger con una plantilla harbor modificada para tres columnas, por si tiene algo que ver con el problema.
El código de estilo lo he puesto justo antes de la etiqueta /b:skin, el script antes de head, como indicabas, y el código con el enlace correspondiente a una imagen de flickr.
¿Tengo que registrarme en websnapr o algo de eso? Llevo todo el santo día a tortas con esto.
Una ayudita, por favor. Gracias mil
Gracias por la rapidez en la respuesta, justo acabo de arreglarlo. Por lo visto al copiar y pegar el código desde el navegador las comillas se sustituyeron automáticamente por ampersand y no se qué más, por eso no tiraba.
El post que tengo con los snapshots de momento lo dejo tal cual porque es una paliza cambiar todos los enlaces, pero empezaré a probarlo para algunas cositas en próximos posts.
Muchísimas gracias.
¡Felicidades por tu blog! Es muy útil.
He probado a ponerlo en mi blog, pongo el código bien, y en cuanto guardo cambios en plantilla no sale el bocadllo, vuelvo a editar y veo que el código ha cambiado, se genera un 39 por varios sitios.
Lo hago con los artilujios expandidos.
Lo he puesto en este blog:
http://salondesoles.blogspot.com/
¿Qué hago mal?
Mi mail: lindopuyal@gmail.com
Un saludo.
Helena.
Cuando te vas a animar a hacer esa aplicación que dijiste que facilitará poner las mini-capturas con un simple código'
sigue funcionando este código?
Publicar un comentario