Colocar Fanbox con efecto deslizante para Blogger

Hola amigos de Trucasos Blogger Hoy le traigo esta otra versión de las famosas cajas flotantes que circulan por la red, estas cumplen la misma función de las otras, pero son otra versión.

Para colocar estas cajas flotantes debemos seguir los siguientes pasos:

1er Paso: Copiamos el siguente codigo.

<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/AVvXsEhL-0rUom936ZmKXICvSjTttrg2afg78LcLu82PVyMx8faJkwb2MCzfJqt8_YpYsFv-T35sIjWrW5JT-3QlwTfo86pn3kMiejiStvIzyEf6G-u-2OEijLo-wYph2qdjzevQpSL2j6DpYkM6/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/AVvXsEh_prBdodLnnysn2S7lBuRwX1CamBMSKTjOzMbm0-cAvt_kEmAXiKWwJUkxwzc2q_5JOmcn4N6rDGohqQDo8nn_WCLyoxNuF-BOq4nz6DSnqaJATZN6RneW5IgDA-m_7ziB7TAT4vu6Z0d-/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/AVvXsEgTKUbG9EAajlpz6PAEE_7Twekhn_p5kfXVgEHaz6-iR1txbjfEO9T5Ns4JYkhxtIaIHFzhrzDXwenjxKMzrDnPvQPiZwvSicWIjulWIv4Iafbi-hWM7fZuVHGXnv9Ud3K05SSsNIpjDPYM/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>

2do Paso: Nos dirigimos a Diseño>Añadir un gadget >HTML/Javascript y pegas el código hay.

3er Paso: Ahora cambiaremos los Datos según tu cuenta de esta manera:

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/446734...32/TrucasosBlogger. Entonces cambia todas las barras diagonales "/" por %2F

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

Y únicamente lo que debes reemplazar por; NOMBRE-PAGINA-FACEBOOK es pages%2F446734008741232%2FTrucasosBlogger (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

Y eso es todo espero que les sea útil. ¿Dudas? deja un comentario Saludos