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:


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

16 opinaron:

G

Uyyy está genial; es un efecto muy bueno se ve muy bien.

Lo aplicaré en seguida!

Responder
La inquisidora

El efecto es muy bueno se ve profesional y muy elegante

Responder
juan carlos

Lo agregaré; con tu explicacion se ve sencillo para implementar en el blog. Además es un efecto que, como dijeron en los comenatrios de arriba, se ve bastante profesional.

Un saludo!

Responder
squirrel

Coincido con los demás; se ve muy bueno este efecto BubbleUp en los íconos de redes sociales. Incluso se podría aplicar para un menu, donde dica Inicio, etc.
Lo aplicaré a mi blog de todas formas esta muy bueno

Besossss

Responder
Graciela

Delicado, precioso Jéssi!

Que te encuentes bien, mis besos :D

Responder
Jéssica YK

» G:
Sí, el efecto se ve muy bien!

S@lu2

Responder
Jéssica YK

» La inquisidora:
Totalmente de acuerdo

S@lu2

Responder
Jéssica YK

» juan carlos:
Me alegra que te haya sido de ayuda.

S@lu2

Responder
Jéssica YK

» squirrel:
Sí, como indiqué en el post, puedes sustituir los íconos por otros o hacer un menú como dices.

S@lu2

Responder
Jéssica YK

» Graciela:
Gracias por la visita; siempre eres bienvenida.

S@lu2

Responder
Tavo-Xin

Hola Jessica, gracias por publicar todo este contenido, me ha servido mucho en la creacion de mi blog, si podes seguirme en twitter o en facebook. Gracias de antemano

http://solo-alejoyvalentina.blogspot.com

S@lu2 a To2

Responder
Jéssica YK

» Tavo-Xin:
Me alegra que el post te haya sido de ayuda!

S@lu2

Responder
Zenix

hola quisiera saber como hago para que solo aparezca al final de una entrada.

Responder
Jéssica YK

» Zenix:
Para que los íconos se muestren debajo de cada entrada:en tra al código HTML de la plantilla, da click en expandir plantilla de artilugios.
Busca la siguiente línea:

<p class='post-footer-line post-footer-line-3'/>

Encima de esa línea pega el código de los íconos.
Das click en Vista previa y das click a Guardar.

S@lu2

Responder
alianzagrafica

gracias preciosa por esta explicacion me es de gran ayuda se te quiere att yeddy

Jéssica YK

» alianzagrafica:
Me alegra que el tutorial te haya sido de ayuda.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio