Seguidores de Facebook, Twitter y Google+, Flotante con Efecto Deslizante

Actualizacion: Se agrego la caja de Google+

Este es el primer articulo que escribo, y quiero mostrarte unas Fanbox de Twitter, Facebook y Google+ muy utiles.

Estas son un poco diferentes a muchas de las que he visto, por eso mismo es que me han gustado, y estoy seguro que te agradaran y te seran de ayuda.

Las cajas flotantes se veran asi:

Mira en este blog de pruebas una demostracion.

Ahora, para ponerlas en tu blog simplemente copia el siguiente codigo y ve a Diseño - Añadir un gadget - HTML/Javascript y lo pegas alli.

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


<style>
#fb_like_box {
    position:fixed;
    z-index:10000;
    top:1px;
    left:-540px;
    width:370px;
    height:180px;
    padding:50px 100px 0 130px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETbRMA6Nizr5Me6AbphCQGXw1vqfyI8Lt9u5hMfxTfv4BB4zXeVL2MKrgYErcY_-C5gqMz_TGC7EiWT4VWguZWId8UQurr-BvBYYAUg2wUrwnLQQ5WXwx_kdNZ5chBBp7qjF9NMqBMmE/s1600/fb-like-box-slider.png) no-repeat;
}
#twitter_follow_us_box {
    position:fixed;
    z-index:10000;
    top:210px;
    left:-540px;
    width:370px;
    height:180px;
    padding:50px 100px 0 130px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFjGjE4hDwoNMHgbGSzV65NGqRCBoAKpOpUkBj3pxZbXG7VxYa4Qq5NToVxNFL34SHlyHEiOOiaPkiXDB8TRKPWKf82jOMNMPQiRrYJ6K7nwtoKDnlljUpZ-c88BBPxNAd7trfSlKGky4/s1600/twitter-follow-box-slider.png) no-repeat;
}
#g-plus-seguidores {
    position:fixed;
    z-index:10000;
    top:420px;
    left:-540px;
    width:370px;
    height:180px;
    padding:50px 100px 0 130px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIM-Hb0Qhhw7ZSL6kwR9mKd04T-q7DqXIgNXBT3rwkH9rnhzMiG8GVjyq8812QRPcqV4tGYdpsPTueUbnWPK3VbMGozbHlvC7RLN2YRFMOxBWGEamnxm0j3rpDUTk5g1mxTaUl11AHWXY/s1600/g-plus-seguidores.png) no-repeat;
}
</style>

<div id="fb_like_box">
<h3 style="color: #3b5998;">
 Acompañanos en Facebook </h3>
<div style="color: #3b5998;">
Dale un Me gusta y síguenos</div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FPAGINA-FACEBOOK&amp;width=370&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true&amp;appId=334915956563249" style="border: none; height: 72px; overflow: hidden; width: 370px;"></iframe>
</div>
<div id="twitter_follow_us_box">
<h3 style="color: #3ec3f0;">
  Síguenos en Twitter </h3>
<div style="color: #3ec3f0;">
Recibe nuestras actualizaciones</div>
<br />
<a class="twitter-follow-button" data-show-count="true" data-size="large" href="https://twitter.com/USUARIO-TWITTER">Seguir @TerrenoBlogger</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id='g-plus-seguidores'>
<h3 style="color: #cf4232;">
  Síguenos en Google+ </h3>
<div style="color: #cf4232;">
Únete con con nocotros</div>
<br />
<div class="g-plus" data-action="followers" data-height="100" data-href="https://plus.google.com/ID-PAGINA-GOOGLE+" data-source="blogger:blog:followers" data-width="350">
</div>

<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'es'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        if (!window.Touch) {
            $('#fb_like_box').mouseenter(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }).mouseleave(function() {
                        $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
                    });
        }

        else {
            $('#fb_like_box').toggle(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }, function() {
                $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
            });
        }
    });
</script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        if (!window.Touch) {
            $('#twitter_follow_us_box').mouseenter(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }).mouseleave(function() {
                        $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
                    });
        }

        else {
            $('#twitter_follow_us_box').toggle(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }, function() {
                $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
            });
        }
    });
</script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        if (!window.Touch) {
            $('#g-plus-seguidores').mouseenter(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }).mouseleave(function() {
                        $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
                    });
        }

        else {
            $('#g-plus-seguidores').toggle(function() {
                $(this).stop(true,true).animate({left: '-100'}, 200, function() {});
            }, function() {
                $(this).stop(true,true).animate({left: '-540'}, 200, function() {});
            });
        }
    });
</script> 

Recuerda que lo que esta en subrayado en Rojo al inicio, es el codigo Jquery; por lo tanto si ya lo has puesto en tu plantilla omitelo porque de lo contrario no funcionara o causara problemas en tu blog.

Cambia USUARIO-TWITTER, PAGINA-FACEBOOK e ID-PAGINA-GOOGLE+ por la identificacion de tus cuentas, respectivamente.

Si tu pagina en facebook aun no tiene un usuario personalizado, cuando lo agreges, por ejemplo:
http://www.facebook.com/pages/Blogger/126265710718005. Cambia todos los / por %2F.

Entonces quedaria asi: http://www.facebook.com/pages%2FBlogger%2F126265710718005, y lo que debes reemplazar por PAGINAFACEBOOK es solo esto: pages%2FBlogger%2F126265710718005

Para conocer el ID en Google+, ve a tu pagina y veras un enlace en la barra de direcciones asi:
https://plus.google.com/115416392195555353313. El numero que esta subrayado es el ID.

Seguramente te sera de utilidad.
Saludos