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.
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
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&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 a la Izquierda
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&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” 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&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” 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&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.
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
ahora lo pruebo (Y)
ResponderEliminarmui buena explicacion
ResponderEliminarpero como puedo poner el link de la pagina de facebook que deceo que le den like???
Hola, cambia en este punto donde dice: http://www.facebook.com/pages/Ayuda-de-Blogger/140889692709017
ResponderEliminarDebes borrarlo y poner el link de tu fanpage.
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarQue tal, bueno he insertado este codigo en mi pagina web html, pero no aparece el widget.
ResponderEliminarHola 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..
EliminarSaludos...
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!!
ResponderEliminarHola, de nada amigo.
EliminarSaludos.
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!!
ResponderEliminarhermano 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.
ResponderEliminarbuenas 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
ResponderEliminarMinisterio Cosas De Pareja
www.cosasdeparej.jimdo.com
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"?
ResponderEliminarMuchas gracias, mi blog es: http://tutoriales-leonel.blogspot.com/
Una cosa,amigo,yo ya tengo lo msimo epro en Google más.
ResponderEliminarNo sé cuál de ellos elejir D:
Hola, puedes escoger los dos, publique un tutorial en el cual se puede insertar la fanpage de Facebook y Google+ . Saludos
Eliminar