Botones con Efecto Burbuja con jQuery y CSS

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

Posted in: Botones Para Compartir,zona de blogger