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("http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfHVMXhWk/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("http://2.bp.blogspot.com/-MaW4PTF8Qkc/T13eWvP_ZoI/AAAAAAAABc8/ZCYfPlB1jug/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("http://1.bp.blogspot.com/-_DJDMqA7TyA/T13eVz4Ej5I/AAAAAAAABc4/uVvfReYXqmY/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("http://1.bp.blogspot.com/-_DJDMqA7TyA/T13eVz4Ej5I/AAAAAAAABc4/uVvfReYXqmY/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
14 comentarios: