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 ..
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 comentarios