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