Tutorial: Colocar Fanbox con efecto deslizante para Blogger

Wizard

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
27 Ago 2011
Mensajes
4.160


Les dejo 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.

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


Insertar CODE, HTML o PHP:
<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>

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:

[YOUTUBE]U9JVqD8pa9A[/YOUTUBE]​

Fuente: Cajas sociales con efecto deslizante para Blogger | Foco Blogger
 

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tutorial aprobado, se agradece el aporte :)
 

Alexander

Baneado
Xi
Verificación en dos pasos desactivada
Desde
13 Ene 2010
Mensajes
4.208
Buen aporte Pedro, muchas gracias :encouragement:
 

Wizard

Xi
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
27 Ago 2011
Mensajes
4.160
A la orden :) espero que les sirva
 

pakohead

Curioso
Verificación en dos pasos desactivada
Desde
22 Feb 2013
Mensajes
2
Muy bueno, me gustan esas cajas y ya los implementé, muchas gracias por el aporte
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba