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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>
/*<![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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>
/*<![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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>
/*<![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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#ffffff;" allowtransparency="true"></iframe>
</div>
/*<![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&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&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;
Follow Us
Were this world an endless plain, and by sailing eastward we could for ever reach new distances