COMO COLOCAR POPUP PARA CURTIR PÁGINA DO FACEBOOK COM TIMER PARA BLOG

Como Colocar PopUp LikeBox do Facebook com Timer no Blogger

Você já deve ter percebido que, ao visitarmos alguns blogs, aparece uma popup divulgando uma página no Facebook, convidando seus leitores a curtirem-na.

Exemplo


1- Acesse seu Blogger e vá em "Layout".

2- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

3- Dentro do conteúdo do gadget cole o código abaixo:

<!-- jquery popup facebook like box com timer -->
<style type='text/css'>
#popup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#popup span{
font-size:20px !important;
font-weight:bold !important;
}
#popup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYAFlbK9ONkta9V6s_UCWxR9M2FnALFJgXwVzFDkKYO0VuLAymFHhhScjIhDfk85lmg1r7sxGpTa7PnBSBU_yJEXupu7Lgs5v1B4t37O5T-FqsofhpOvPaAhGgTI497vwsovQpfDPPC33_/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function _ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#popup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#popup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#popup").css({"top":mdfromTop});}
jQuery(window).fadeIn(_ppopup).resize(_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#popup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#popup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#popup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#popup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="popup">
<h1>Curta nossa Fanpage</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FSUAPAGINAAQUI&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Fechar</a>
</div>
</div>
<!-- Fim popup -->

Atenção para as partes destacadas em VERMELHO:

* Em var sec = 10, representa o tempo em segundos que a popup fica aberta, mude caso desejar.
* Em Please wait..<span>10</span> Seconds, representa a mensagem de tempo que aparece, configure de acordo com o item anterior.
* Em Curta nossa Fanpage, representa o título da popup, altere caso desejar.
* Em SUAPAGINAAQUI, troque pelo nome de sua página ou em alguns casos o ID.

4- Clique em "Salvar" e depois "Salvar Organização".

5- Vá em seu blogger, "Modelo", "Editar HTML" e pesquise por </head>.
>> Logo ACIMA da tag pesquisa cole o seguinte código e depois clique em "Salvar Modelo".

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>