Caja de seguidores de facebook Popout para blogger

Es indispensable para muchos blogs de blogger tener una página de blogs que contengan las redes sociales mas visitadas en la actualidad, es por esto que voy a compartir con ustedes un Popout de Facebook para que lo utilicen en su blog de blogger. El nuevo Popout de caja de seguidores de Facebook lo podrán utilizar en la parte izquierda, derecha, arriba del blog y abajo del blog, solo necesitan seguir mis instrucciones de configuración y listo, podrán utilizar este espectacular Popout caja de seguidores de Facebook, y así obtener más Likes en su blog de blogger. Sólo podran utilizar un widget, asi que deberas elegir cual de ellos te biene mejor en tu blog.

Funcionamiento

Esta nueva caja de seguidores de Facebook es estática y solo se abrirá cuando el cursor del Mouse pase por encima de ella.

Caja de seguidores de facebook Popout para blogger

A continuación mire su demostración en mi blog de demos



Siga los siguientes pasos

Si no utilizas ningún plugin de Jquery en tu blog de Blogger, deberás insertar el plugin y si ya utilizas el plugin de Jquery en tu blog de Blogger ya no necesitaras insertar este código.

Si no utilizas el plugin de Jquery, da un clic en “Plantilla”, luego en “Editar HTML” y busca este código </head> y encima de el inserta la siguiente línea de código

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


Ahora da un clic en “Guardar plantilla”, recuerda si ya tienes instalado este plugin sáltate este paso y dirígete al segundo paso.

Segundo Paso

Insertar el Popout de Facebook a la derecha

Caja de seguidores de facebook Popout para blogger

Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdsD86yul0cO8ul7_MDFErNVDxhADYaWEjJPRk2xpFHIXIf3qoFB9SZLX5RwPnW4RW14Z_hyu774F2nM3E7GkBVYcmLfJ2fwuAy2qzlA-4oAkjGshCpJ9mJd0VDGL166glt2xWXwEu9zB/s1600/w2b_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.
Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.

Insertar el Popout de Facebook a la Izquierda

Caja de seguidores de facebook Popout para blogger

Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig4gxp7V8X99djkBZTzdkjm4kUMY7YztME6y_gfCln6OcXPDe6jwpaPImqbyF_qVp8NoFYhf-PM9bfukhWJ0WSc6rqbUfLY6Thfmcb82PnV8uFUzpvMzIRDITo1KP69pcFq9mIt_1iDKY1/s1600/w2b_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({left: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>

Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.
Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.

Insertar el Popout de Facebook Arriba de tu blog

Caja de seguidores de facebook Popout para blogger

Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 47px;left: 50%;margin-left: -75px;position: absolute;bottom: -47px;width: 150px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQeQyZFakbv9ljQBcYI4velIDy9-ScF_CIFwTjwGhSAyj346Yp_4LwSRUf2tqT8_UGVEStJQuQZA1lnUW8d8Vrd17MQOaJSkFYwjaNCY2JyWjww5mIijJ0D-SQhCl9iOY_OHHyRZvEWu9/s1600/w2b_horizantal.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-bottom-right-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-bottomright: 8px;-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({top: -250, "left" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    top: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    top: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>

Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.
Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.

Insertar el Popout de Facebook abajo de tu blog

mejor adsl

Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” e inserta las siguientes líneas de código:

<style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 47px;left: 50%;margin-left: -75px;position: absolute;top: -47px;width: 150px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxQeQyZFakbv9ljQBcYI4velIDy9-ScF_CIFwTjwGhSAyj346Yp_4LwSRUf2tqT8_UGVEStJQuQZA1lnUW8d8Vrd17MQOaJSkFYwjaNCY2JyWjww5mIijJ0D-SQhCl9iOY_OHHyRZvEWu9/s1600/w2b_horizantal.png");background-repeat: no-repeat;-webkit-border-top-left-radius: 8px;-webkit-border-top-right-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright: 8px;border-top-left-radius: 8px;border-top-right-radius: 8px;overflow: hidden;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({bottom: -250, "left" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    bottom: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    bottom: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/Ayudadeblogger&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>

Realiza estos cambios

El link que esta marcado de color azul, deberás sustituirlo por el link de tu fanpage de Facebook, si quieres cambiar el color del widget solo cambia las letras que están marcadas de color rojo por el código de color que tu quieras.
Ahora da un clic en “Guardar” y ubica el widget donde tú quieras y listo ya tienes tu nuevo Popout de caja de seguidores de Facebook.

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

14 comentarios:

  1. mui buena explicacion
    pero como puedo poner el link de la pagina de facebook que deceo que le den like???

    ResponderEliminar
  2. Hola, cambia en este punto donde dice: http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017
    Debes borrarlo y poner el link de tu fanpage.
    Saludos.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Que tal, bueno he insertado este codigo en mi pagina web html, pero no aparece el widget.

    ResponderEliminar
    Respuestas
    1. Hola algo debes de estar haciendo mal, es por eso que no se te muestra el popout.. Sigue las instrucciones tal como lo explico, el widget funciona correctamente en mi blog de demos..
      Saludos...

      Eliminar
  5. Gracias amigo..!!! me gustan mucho tus tutoriales,trucos.concejos.. y la forma de explicarlos..todo lo que hago a través de ti me funcionan siempre correctamente..soy un novato en esto pero contigo aprendo muy bien..mil gracias por conpartir tus conocimientos ..saludos desde España!!

    ResponderEliminar
  6. Hola Julio.. yo hice mi web a traves de webnode... y eh probado muchas cosas lo que publicas en mi pagina y me ha resultado de maravilla!!

    ResponderEliminar
  7. hermano como estas? mira lo hago exactamente como lo explicas, pero me sale en blanco, sin enbargo pego el codigo como lo dejas en la pagina entonces funciona, pero con tu información.

    ResponderEliminar
  8. buenas tardes Luis, desde hace días estoy buscando insertar en mi web un headline como el que he visto a aquí pero no encuentro los códigos podrías tu ayudarme por favor.Gracias

    Ministerio Cosas De Pareja
    www.cosasdeparej.jimdo.com

    ResponderEliminar
  9. De nuevo muchas gracias, soy nuevo en Bogger y me sirve mucho tu contenido, pero tengo un inconveniente, ya agregué los gadgets para el popout de de bienvenido y la caja de seguidores, pero resulta que aparecen en la parte derecha de mi blog. ¿Cómo hago para que no aparezcan en esa parte, es decir que estén ocultos de ese "menu"?
    Muchas gracias, mi blog es: http://tutoriales-leonel.blogspot.com/

    ResponderEliminar
  10. Una cosa,amigo,yo ya tengo lo msimo epro en Google más.
    No sé cuál de ellos elejir D:

    ResponderEliminar
    Respuestas
    1. Hola, puedes escoger los dos, publique un tutorial en el cual se puede insertar la fanpage de Facebook y Google+ . Saludos

      Eliminar