Cajas sociales con efecto deslizante para Blogger

Desde el año pasado se están viendo este tipo de widgets por diferentes blogs, no siempre la misma versión pero la mayoría de las veces cumplen su función que es colocar una Fanbox con el botón de hacerse Fan, o Seguidor, por la red he visto muchas veces la versión en donde sale la función antes dicha mostrando los rostros de las personas, pero muy pocas veces he visto la versión en donde sólo se coloca el botón para seguir o hacerse fan (A mi personalmente me gusta más esta).



Puedes ver cual es esta versión en este Blog de Pruebas

Para colocar este tipo de cajas deslizantes debemos seguir estos pasos:

1- Copia el siguiente código

<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/AVvXsEihrO2NfZ1BQvD2H8JxJN6QJtUuYrvuBxb1JSF-shEXLuOlrlOqBUC3pkpTHzL4XyQstgl0-YRhVmJB-YPZGaDKN9iftXx579r5jVQ-9Popw5xeOeNqlD3eGIVe1P6YlvLs6LrQFtqqxyVn/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/AVvXsEhCQip8QVUF_5Ptb-9uAsTINffTPz25CypvxtIjJ_YL0qTWM65AaBBRkk19egpI65BoQfK1i1BsWwFQMmz54-CQunJN6fHKn3CbONpLG87REl8T9dZ2K3EmAT49_VzWVrj20i6SkujTQtr6/s1600/tw-like-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/AVvXsEgEnm4UsGlTVFljhN-K9js51aTu5P5KtY_SVuLW-G3OXD-AWXs42B4l2IEahgl0sCGpeeA3v7Qc__13HkSr3AXrCVTOi6d0fd_GiBYQHKVb0t6BcARIKH35dnISAjQftbLJzJfaZwwiQvfO/s1600/gp-like-box-slider.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%2FNOMBRE-PAGINA-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 @FocoBlogger</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 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>
<! -- creado por http://www.focoblogger.com/ -->
<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>

2- Dirígete a: Diseño - Añadir un gadget - HTML/Javascript y lo pegas el código ahí.

3- Ahora deberás colocar tus datos de los perfiles sociales, de esta manera, ubica:

     -USUARIO-TWITTER (Y lo sustituyes por tu usuario)

     -NOMBRE-PAGINA-FACEBOOK (Y colocas el nombre de tu página de Facebook, Si tu pagina en facebook aun no tiene un usuario personalizado, cuando lo agregues, haces lo siguiente:

Supongamos que tu página de facebook es: http://www.facebook.com/pages/446734008741232/FocoBlogger. Entonces cambia todas las barras diagonales "/" por %2F

Quedaría de esta manera: http://www.facebook.com/pages%2F446734008741232%2FFocoBlogger

Y únicamente lo que debes reemplazar por NOMBRE-PAGINA-FACEBOOK es pages%2F446734008741232%2FFocoBlogger (Si te fijas en el código antes de NOMBRE-PAGINA-FACEBOOK ya está incluído http://www.facebook.com/ por ello es que sólo debes cambiar las barras diagonales a partir de ahí)

-ID-PAGINA-GOOGLE+ al ubicarlo simplemente copia el id de tu perfil de Google+ y lo reemplazas

Aquí dejo un video en donde se muestra como colocar el Gadget por si no has entendido algo:



La versión original de este Widget ha sido creada por TerrenoBlogger nosotros aquí en Foco Blogger sólo hemos cambiado un poco la apariencia de las cajas, pero todos los créditos pertenecen a sus correspondientes autores. Esperamos que te gusten.