mas-audaz: Barra flotante superior deslizante con botones sociales para compartir de AddThis.com

Hoy les traigo un widget que sé que les va a gustar mucho. El widget del que les hablo es una barra color negro gradiente, muy elegante y dezlizante que va en la parte superior de tu blog ó página web con botones de las redes sociales, además de otras opciones como recomendar tu página por correo electrónico, imprimir, etc. Y este widget es gracias a Addthis.com.

Esta barra dezlizante aparecerá cuando bajemos la página, y desaparecerá cuando subamos.

VER DEMO

¿Te encantó el efecto de esta barra y deseas tenerlo?...

Muy fácil. Entonces sigue estos pasos:

1) Primero debemos tener una cuenta en AddThis. Para ello debemos registrarnos, ingresa aquí para hacerlo. Colocas tu correo electrónico y tu contraseña personal 2 veces.

Abrir imagen

2) Una vez registrado(a), iniciamos sesión e ingresamos al siguiente enlace.

3) Ahora esta es la parte más importante, nos encontraremos con la página de esta barra flotante con 2 códigos, una arriba y otra abajo. La primera dice HTML y la segunda es Javascript.

Primer código (HTML):
En la primera parte, debemos escoger primero qué tamaño de la barra queremos. Son tres tamaños: La grande, la mediana y la pequeña. La barra que vieron en el blog de pruebas, es de tamaño mediano, pero pueden escoger el más grande, ó bien el más pequeño. Cuando escojan el tamaño, al costado de esta barra (a la derecha) hay un enlace color azul que dice "View Code" le dan click (de la barra que han escogido). Luego arriba les aparecerá el código HTML correspondiente, lo copian y lo pegan en un gadgetde su blog.

En blogger, se van a Diseño > Elementos de la página > Añadir Gadget. Si no saben cómo agregar un gadget en blogger, visiten esta entrada.

Abrir imagen

Segundo Código (Javascript):
Ahora nos vamos más abajo, en el segundo código que vemos. Ese código es el que debemos copiar y luego pegar antes de </head> en tu plantilla.

Si usas blogger, entonces te vas a Diseño > Edición de HTML > presionas (Ctrl+f) y buscas </head> y justo encima (ó antes) pega el segundo código de la página.

Abrir imagen

Una vez pegado, deberás poner el ID de tu perfil de Addthis. Para ello te vas abajo en el enlace azul que dice "AddThis Profile Settings" ó bien puedes dar click a este enlace. En él deberás copiar TU ID DE ADDTHIS, CLICK AQUÍ PARA VER LA IMAGEN. Luego tu id, lo insertas en donde dice [YOUR PROFILE HERE] en el código #2 que previamente pegaste antes de </head>. Luciendo así:

Agrandar imagen

4) Luego guardas los cambios de tu plantilla y eso sería todo.

¿Demasiado difícil la explicación?
Si te resultó muy dificil la explicación anterior, entonces sigue estos pasos más sencillos:

1) Nos vamos a Blogger > Elementos de la página > Agregar gadget (elemento HTML/Javascript)

Abrir imagen

2) Ahora dentro de la ventana, pegamos lo siguiente:

<div class="addthis_bar addthis_bar_medium">
    <label>Comparte esta página:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

5) Guardas los cambios de tu gadget y eso sería todo.

Espero les haya servido este tutorial y ¡hasta pronto!...

Imprimir artículo