Tutorial: Colocar Fanbox con efecto deslizante para Blogger

<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(http://4.bp.blogspot.com/-x95_aU4wj0o/UXROj6JkaNI/AAAAAAAAARs/dsYG2z4FGko/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(http://2.bp.blogspot.com/-ZQtzDezpUcM/UXROj6htQdI/AAAAAAAAARw/rNjAXa3R3ZI/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(http://3.bp.blogspot.com/-YJ_i2GnER_c/UXROjgz0cJI/AAAAAAAAARo/9TVzLoXjCZ8/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>