**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...
