Rotulo

EL MUNDO DE KIKO

Ultimas entradas

Entrada Destacada

PÁGINA DE BIENVENIDA

CAJA DE SEGUIDORES DE FACRBOOK EN UN POPOUT PARA BLOGGER. Es indispensable para muchos blogs de blogger tener una página...

CAJA DE SEGUIDORES DE FACRBOOK EN UN POPOUT PARA BLOGGER

By Blogs Famag septiembre 07, 2019 0 comentarios
CAJA DE SEGUIDORES DE FACRBOOK EN UN POPOUT PARA BLOGGER.





Es indispensable para muchos blogs de blogger tener una página de blogs que contengan las redes sociales más 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.

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 abajo de el inserta la siguiente línea de código

 Un clic en “Plantilla”



 Un clic en “Editar HTML”



Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación



En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,



 Coloca este código en el buscador y dale un "Enter"


<head>




Inserta las siguientes líneas de código justo  debajo del código que encontraste.



<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


 Para implementarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:

Un clic en “Diseño”



Clic en “Añadir un gadget”



Busca el widget que dice “HTML-Javascript” y ábrelo



Coloca el siguiente código en el interior







Insertar el Popout de Facebook a la derecha


<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/AVvXsEiLOGsJYnS-FJY8QUGa3TrxMQs2Y2WfQdi7ABdqxbJf-wr3EahgvpGy-_VjhXPgFOGnKIMGyi94nLln86yMBZJxxkVUpH7UGWmJzs6Adejh0fbEA7HyvRPYzwBfcGgz-ma9N4H3Vx7S29Ah/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.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:


Insertar el Popout de Facebook a la Izquierda




<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/AVvXsEihngLhoThvOl7T5dQjy2ILcdVQ57XWYzFlKn7HJtEMUVneJC7LpsQ92WUzE16LUHucs0u3AOlu4b5S_ggROUafXUrvibVmDQBS6LdLLtV3mgYSsYzBzn6bXATICuERsxm5_O88v3HNPgVF/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.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:

Insertar el Popout de Facebook Arriba de tu blog


<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/AVvXsEjUPlYd4ibBG8LbGZkLV0y56YMeYs98qBf-rAqeaayVKhb2ajPJtfyeu5wVnKXAaTSuj5TPd2hrXvdcAUmDIvlMIt-aY2EeRh45KXiW7iLTTmjg0-ZsBdlOFxP-_3dLcoMHQ3N0mfO6_eeq/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.




Da un clic en “Añadir un gadget” haz la misma operación que con el anterior e inserta las siguientes líneas de código:

Insertar el Popout de Facebook abajo de tu blog



<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/AVvXsEjUPlYd4ibBG8LbGZkLV0y56YMeYs98qBf-rAqeaayVKhb2ajPJtfyeu5wVnKXAaTSuj5TPd2hrXvdcAUmDIvlMIt-aY2EeRh45KXiW7iLTTmjg0-ZsBdlOFxP-_3dLcoMHQ3N0mfO6_eeq/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.







 Data de la Publicación; 07-09-2019

 Fuente;  ayudadeblogger

 Publicado por;                                                                            





0 comentarios:

Suscribirse a: Enviar comentarios (Atom)

Paginacion