Mil Trucos Blogger

Fanbox de Facebook PopUp versión 2016

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

A lo largo de los años que llevo publicando en Mil Trucos Blogger he publicado varios fanbox de Facebook tanto normales como aquellos que se abren en forma de PopUp, como es el caso del truco que voy a publicar en el que veremos como añadir un fanbox de facebook en un Popup (versión actualizada al 2016).

Fanbox de Facebook PopUp versión 2016 ..

fanbox-de-facebook-popup-2016-blogger

Vista Previa del Truco

Para añadir este truco a tu blog ve a Plantilla, Editar HTML y justo antes de ]]></b:skin> añade lo siguiente:

.popup {
background-color: #ffffff;
color: #888888;
height: 285px;
padding: 20px;
position: fixed;
right: 30%;
top: 25%;
width: 340px;
z-index: 101;
-moz-box-shadow: 0px 0px 10px 1px #888888;
-webkit-box-shadow: 0px 0px 10px 1px #888888;
box-shadow: 0px 0px 10px 1px #888888;
border-radius: 10px;
-moz-border-radius: 10px;
}

.overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 100;
opacity:0.5;
}

a.close {
background: url("http://i.imgur.com/ZSlkx6J.png") repeat scroll left top transparent;
cursor: pointer;
float: right;
height: 32px;
left: 32px;
position: relative;
top: -33px;
width: 32px;
}

#backpop{background-color: rgba(51, 51, 51, 0.81);width: 100%;height: 100%;z-index: 999;position: fixed;}

Ahora antes de </head> añade lo siguiente:

<script type="text/javascript">
function openDialog() {
 $('#overlay').fadeIn('fast', function() {
 $('#popup').css('display','block');
 $('#popup').animate({'left':'30%'},500);
 });
}
function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#overlay').fadeOut('fast');
});
}
</script>

<script type="text/javascript">
function openDialog() {
$('#overlay').fadeIn('fast', function() {
$('#backpop').css('display','block');
$('#backpop').animate({'left':'30%'},500);
});
}

function closeDialog(id) {
$('#'+id).css('position','absolute');
$('#'+id).animate({'left':'-100%'}, 500, function() {
$('#'+id).css('position','fixed');
$('#'+id).css('left','100%');
$('#backpop').fadeOut('fast');
});
}
</script>

Por último busca la etiqueta <body> y pega arriba de ella lo siguiente:

<div id="backpop">
<div id="popup" class="popup">
 <a onclick="closeDialog('popup');" class="close"></a>
 <div>
 <div style="font-size: 14px;color: #333;line-height: 1.8em;text-transform: uppercase;text-align: center;font-weight: bold;">Apoyanos con un Like! es GRATIS! :D</div>
AQUI CODIGO DE TU FANBOX
 </div>
</div>
 </div>

Para obtener el código del fanbox debes dirigirte al Plugin de Páginas de Facebook (recuerda que en este paso solo debes pegar la segunda parte del código que te da Facebook, la primera la puedes pegar en un gadget HTML/JavaScript).

Ya solo queda guardar los cambios y disfrutar de este genial truco.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

2 Comentarios

  1. Feliziano23 Feliziano23
    Mayo 20, 2016    

    Gracias por compartir….me gustaría saber si esa ventana emergente se puede colocar que no ocupe la pantalla completa.

    • Juvinao Juvinao
      Mayo 20, 2016    

      Hola Feliziano, la ventana emergente no ocupa toda la ventana completa, de hecho el tamaño del cuadro es de 285×340 px.

      Saludos 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo