Marcadores redes sociales con BubbleUp jQuery

Hoy vamos a ver una nueva forma de hacer nuestros marcadores de redes sociales más vistosos con este nuevo efecto-burbuja de Aext.net

Para ello usaremos un plugin de jQuery y claro la libreria jQuery. La DEMO pueden verla casi al final de la entrada.

1.§ Lo primero que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: ingresamos a Diseño - Edición de HTML y buscamos la etiqueta </head>. Antes de éste, pegamos el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

2.§ A continuación descargamos el siguiente archivo .js ↪ Descargar .
Posteriormente lo subimos a nuestro alojamiento preferido.

3.§ Nuevamente buscamos </head> y debajo del primer código que pegamos, pegaremos el siguiente:

<script src='http://www.alojamiento.com/jquery.bubbleup.js' type='text/javascript'/>

<script type='text/javascript'>
$(function(){
$(&quot;ul#menu li img&quot;).bubbleup();
});
</script>
<script type='text/javascript'>
$(function(){
$(&quot;div#demo ul#menu li img&quot;).bubbleup({tooltip: true, scale:64});
});
</script>

Reemplazamos lo que está en negrita por la URL de la página donde subimos nuestro archivo.

4.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:

✵ Ver CSS [+/-]

div#demo ul#menu{
margin:5px 0px;
list-style:none;
display:inline-block
}
div#demo ul#menu li{
padding:0px;
float:left;
position:relative;
margin-left:5px;
margin-right:5px;
width:48px;
height:48px
}
div#demo ul#menu li a{
position:absolute
}
div#demo ul#menu li img{
position:absolute;
width:48px;
top:0px;
left:0px;
padding:0px;
margin:0 8px 0 0;
border:none;
overflow:hidden
}
#bubbleupfeatures tr th, #bubbleupfeatures tr td{
border:1px solid #F0F0F0;
padding:5px;
text-align:left
}
#bubbleupfeatures tr th{
background-color:#F0F0F0
}

5.§ Finalmente, vamos a Diseño - Elementos de la página - Añadir un gadget y HTML/Javascript. En el gadget pegaremos el siguiente código:

<div id="demo">
<ul id="menu">
<li><a href="URL-de-la-página" >
<img src="http://img245.imageshack.us/img245/6186/feedyb.png" alt="Feed via RSS" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img36.imageshack.us/img36/7931/emailmh.png" alt="Email" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img541.imageshack.us/img541/5271/twitterjp.png" alt="Síguenos en Twitter" /></a></li>
<li><a href="URL-de-la-página" >
<img src="http://img442.imageshack.us/img442/3434/facebookha.png" alt="En Facebook" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img580.imageshack.us/img580/8707/deliciousr.png" alt="Delicious" /></a></li>
<li><a href="URL-de-la-página">
<img src="http://img840.imageshack.us/img840/7849/technorati.png" alt="Technorati" /></a></li>
</ul>
</div>

Reemplazamos URL-de-la-página por la dirección url de nuestras redes sociales. Por cierto, las imágenes las aloje en Imageshack pero si desean pueden guardarlas y alojarlas en un servidor propio.

Y este es el resultado (pasar el mouse por encima de los íconos):

Algunas notas adicionales:
» Podemos usar otros íconos y reemplazarlos cambiando la URL de los mismos en el código HTML (paso 5.§)
» Este código funciona perfectamente en Opera, Safari, Firefox e Internet Explorer; sin embargo, el efecto no se nota en IE6.

Visto en : Aext.net