Botones con Efecto Burbuja con jQuery y CSS


En Aext.net nos enseñan a crear un Plugin jQuery, empezando desde cero, así que si les gusta trabajar con los códigos lean este detallado tutorial.

El caso es que en dicho tutorial escrito por Lan Nguyen donde nos enseña a crear un plugin al cual le ha llamado "Bubble Up", tiene un efecto de burbuja, que al pasar el mouse por encima de una o varias imágenes dentro de una lista esta se ampliará con una animación suave, y al sacar el cursor de encima de la imagen esta volverá a su tamaño original con la misma animación suave. Este efecto lo podemos utilizar para ofrecer suscripción a nuestros usuarios, para hacer una barra Bookmarks, para un menú, o para cualquier otra imagen. Pueden verlo funcionando en mi blog de pruebas.

Para utilizar este efecto en tu blog primero tienes que tener la librería jQuery 1.3.2 en tu plantilla, es posible que la tengas, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería jQuery en nuestra plantilla, ahora añadiremos el script que dará vida a la animación, para ello tienes que pegar el siguiente código justo después del anterior código que acabas de pegar justo antes de la etiqueta </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/bubbleup.jquery.js' type='text/javascript'/>
<script type="text/javascript">

$(function(){

$("ul#menu li img").bubbleup();

});

</script>

Ahora añadimos la hoja de estilo CSS, con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

/* CSS menu efecto burbuja */
ul#menu {
margin: 5px 0px;
}

ul#menu li {
padding: 0px;
display: inline-block;
*display: inline; /* IE 7 and below */
position: relative;
margin-left: 5px;
margin-right: 5px;
width: 48px;
height: 48px;
}

ul#menu li img {
width: 48px;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0 8px 0 0;
border: none;
}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código HTML:

<ul id="menu">
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción.imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
<li>
<a href="#" title="nombre-imagen">
<img src="url-de-tu-imagen" alt="descripción-imagen">
</a>
</li>
</ul>

Cambia la # por la dirección de tu enlace, y lo que está en color rojo por la dirección de tu imagen o icono.
No te olvides de ponerle nombre y descripción a tu imagen, la descripción es buena hablando de S.E.O.

Más adelante crearé mi propia barra bookmarks a la que le añadiré este bonito efecto.


Descargar Script + Iconos

14 comentarios:

Jose el 6 de marzo de 2010, 17:26 dijo...

Hola amigo, quiero pedirte un favor!
mira este link: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
necesito que lo veas porque no entiendo nada ni traduciendolo!! jaja vos que sabes mas por ahi lo arreglas y lo posteas aca y yo puedo usarlo en tu blogs... me encanta ese efecto ya que le da mas dinamismo a todo el blogs!... gracias amigo.

josealfredocoronel@yahoo.com.ar es mi correo. gracias de nuevo y ojala me puedas ayudar.
Abrazos desde argentina!

Eduardo Sanguino el 7 de marzo de 2010, 0:40 dijo...

Hola Jose, veré haber que puedo hacer, la verdad es que es un bonito efecto, es algo parecido a este al efecto que tienes este menú
http://www.pazosblogger.com/2010/02/menu-horizontal-magicline-creado-con.html
en cuanto tenga resultado te aviso.

Saludos!

Martín Mundaraín el 29 de mayo de 2010, 23:25 dijo...

Saludos, he puesto el truco en mi blog, muchas gracias..!!

Videos Gratis - Descargar

Eduardo Sanguino el 30 de mayo de 2010, 6:42 dijo...

Hola Martín Mundaraín, gracias a ti por tu comentario, me he pasado por tu blog de videos la verdad es que está muy bonito y organizado.

Saludos!

Alan el 17 de junio de 2010, 21:26 dijo...

Hola amigo sabes me interesa mucho el menú que tienes a un lado en tu blog de pruebas: este que estas enseñando aquí es Horizontal ya lo hice y me quedo bien pero me atrae mas el Vertical me podrías decir si es con este mismo Script o es otro Please.

Agregare PazosBlogger.Com a favoritos para venir aver tu respuesta Please.

Flow King Reggaeton el 18 de junio de 2010, 4:38 dijo...

Hola, queria hacerte una preguntas.

- Si pongo el icono de suscripción por e-mail que enlace debo poner en el código HTML?

- Y en el de RSS Feed?

Gracias, espero tus respuestas. Un saludo ^^

Eduardo Sanguino el 18 de junio de 2010, 6:56 dijo...

Hola Flow King Reggaeton, el enlace que tienes que poner lo tienes que sacar de tu feed, así que ingresa a tu feed, luego localiza la pestaña > Publicize > luego > Suscripciones por Email > veras que te permite cambiar el idiona, escoge el español, más abajo verás dos códigos HTML, el primero no lo copies, y del segundo copia está parte que está entre comillas, es algo así:

http://feedburner.google.com/fb/a/mailverify?uri=TU-BLOG&amp;loc=es_ES

Ese es el cógigo para el enlace de suscripción por Email que tienes que pegar en tu icono.

Para sacar la URL de tu feed, primero ingresa a tu feed, luego click en > Editar Detalles de Feed > luego copia la URL que hay en el recuadro Feed Address: que es algo así:

http://feeds.feedburner.com/nombre-de-tu-blog

Esa es la url que tienes que pegar en el icono del feed.
Espero que te sirva de ayuda, un saludo.

Eduardo Sanguino el 18 de junio de 2010, 7:10 dijo...

Hola Alan, puedes leer el Post que escribí acerca de este menú.

Saludos!

Antonio Priego el 18 de junio de 2010, 11:33 dijo...

Como puedo cambiar el color al icono de RSS feed?
Me gustaria que fuese verde. Un saludo, gracias a ti mi blog ha quedado de maravilla http://motorderisa.blogspot.com/ ^^

SpanS el 11 de agosto de 2010, 17:54 dijo...

Saludos, hay alguna forma para que ese codigo me funcione en IE?? porq solo se ve con FIREFOX...

Eduardo Sanguino el 12 de agosto de 2010, 7:48 dijo...

Hola Spans, este código funciona en I.E. 8, Firefox, Google Chrome, entre otros navegadores principales. Si a ti no te funciona es que tienes una versión de I.E. anterior a la versión 8, actualiza tu navegador para ver el efecto. Saludos!

Zenix el 24 de diciembre de 2010, 11:47 dijo...

Existe alguna manera de que salga al final de cada entrada. Me refiero a que tengas que entrar a la entrada para verlo.

Manel Veloso el 5 de febrero de 2011, 15:09 dijo...

Hola!

Estoy tentando implementar esto truco en mi blog, pero tengo un pequeño problema. Tengo en mi blog un efecto com prototype.

Como puedo tener los dos efectos al mismo tiempo en mi blog sin problemas?

Anónimo dijo...

ya ice el efecto y todo me salio solo que lo kiero poner con otras imagenes de otros tamanos y al hacerlo me sale defectuoso me podrias decir como le ago plis

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

viernes, 26 de febrero de 2010

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino