CAJA DE SEGUIDORES DE FACEBOOK 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.
Solo podrán utilizar un widget, así que deberás elegir cual de ellos te viene 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>
Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
Un clic en “Plantilla”
Un clic en “Editar HTML”
Ahora se te abrirá el Editor HTML de tu plantilla
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,
</head>
Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:
<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.
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:
Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo 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/AVvXsEilUo7TrARJRrPCUNppErU5HmxESkR0A1Q09XwigVqSy0-Ndgnn4fUl4AYdS7HFFe1zbbwa2EXRrqE1ToXAzJ7MPHz1-K1KfZjSqWcuNM26CybxquU6ZqHcLoZqS5av4TPRPIHpFs5728VS/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/AVvXsEilUo7TrARJRrPCUNppErU5HmxESkR0A1Q09XwigVqSy0-Ndgnn4fUl4AYdS7HFFe1zbbwa2EXRrqE1ToXAzJ7MPHz1-K1KfZjSqWcuNM26CybxquU6ZqHcLoZqS5av4TPRPIHpFs5728VS/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.
Despues de haber insertado el código, un clic en "Guardar"
Insertar el Popout de Facebook a la Izquierda
Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” igual que el anterior 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/AVvXsEiQ0BAESmegSLNClE-pJ5kC2eBPvUZp33JGdaN2tZaiotFSIpQ1iM3tHWSFOc_8gdHLNOJoZX1vm23h__QCiuCXF56hZIjdyqd1NJL4TZNCbaNHFo_Hcjf1RWw2v2XaNG3XLJ-UTT-FXgDl/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/AVvXsEiQ0BAESmegSLNClE-pJ5kC2eBPvUZp33JGdaN2tZaiotFSIpQ1iM3tHWSFOc_8gdHLNOJoZX1vm23h__QCiuCXF56hZIjdyqd1NJL4TZNCbaNHFo_Hcjf1RWw2v2XaNG3XLJ-UTT-FXgDl/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.
Insertar el Popout de Facebook Arriba de tu blog
Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” igual que el anterior 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/AVvXsEi19-bSq2u1sqnQGDryS4OcK0sYUVNiP1NM-MXX_gpp1vROUfmR_pXqiF9Yp2nSQwh21bIF7xUwivNb_onN-1hji7UXmfmxSlrTd5HZ3Fy7usz0Z3viKfCIWWht-XwkeNGZ4WoANjsxu2Oo/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/AVvXsEi19-bSq2u1sqnQGDryS4OcK0sYUVNiP1NM-MXX_gpp1vROUfmR_pXqiF9Yp2nSQwh21bIF7xUwivNb_onN-1hji7UXmfmxSlrTd5HZ3Fy7usz0Z3viKfCIWWht-XwkeNGZ4WoANjsxu2Oo/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
Insertar el Popout de Facebook abajo de tu blog
Da un clic en “Añadir un gadget” luego busca el widget que dice “HTML/Javascript” igual que el anterior 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/AVvXsEi19-bSq2u1sqnQGDryS4OcK0sYUVNiP1NM-MXX_gpp1vROUfmR_pXqiF9Yp2nSQwh21bIF7xUwivNb_onN-1hji7UXmfmxSlrTd5HZ3Fy7usz0Z3viKfCIWWht-XwkeNGZ4WoANjsxu2Oo/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/AVvXsEi19-bSq2u1sqnQGDryS4OcK0sYUVNiP1NM-MXX_gpp1vROUfmR_pXqiF9Yp2nSQwh21bIF7xUwivNb_onN-1hji7UXmfmxSlrTd5HZ3Fy7usz0Z3viKfCIWWht-XwkeNGZ4WoANjsxu2Oo/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.
Fuente; ayudadeblogger
Publicado por;
0 comentarios