Como adicionar um Pop-up da sua página do Facebook com temporizador usando jQuery

Amigos, eu estava passeando pela internet e de repente eu encontro um tutorial em um site americano chamado Making Different e nele vi um tutorial espetacular que funciona da seguinte maneira. Quando alguém entra em sua página automaticamente um Pop-up com a pagina de sua fanpage aparece e nem contém um temporizador que faz um contagem regressiva até desaparecer o pop-up. Esse pop-up funciona a base de um jQuery. Se você pretende saber mais, não saia daqui e siga as minhas instruções.

Como você ver no exemplo eu usei o meu Blog como exemplo e ficou assim:

É deste modo que aparecerá em seu blog, mas você poderá
mudar como de sua preferência. Isso veremos a frente.

Esta widget carrega mais rápido em comparação com os widgets do blogger anterior do Facebook que publiquei até agora, ele funciona com todos os navegadores como o IE-7 + e outros mais. Por isso, não se preocupe e siga em frente com esse incrível widget. Agora que você já absorveu algo sobre este widget, mãos a obra!

Como instalar este widget para o blogger?

1°  Adicionando o Plugin jQuery. 

Como sempre, é um widget baseado em jQuery, e seu blog deve ter o plugin jQuery. Se o seu blog já tiver um plug-in mais recente do jQuery, então Ignore esta fase e siga diretamente a segunda etapa.  Caso não tenha coloque o código jQuery abaixo logo acima da tag </head> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>


2°  Incorporando o código HTML dentro de seu blog

É bem simples incorporar este código html, a primeira coisa a fazer que eu recomendo é fazer um back completo de seu blog. Feito isso por motivo de segurança agora é só ir até a aba lateral de seu blog e depois em TEMA quando aparecer a caixa de códigos dê um click dentro e depois dê um CTRL+F e aparecerá a caixa de pesquisa e nela procure por </body> e acima dessa tag cole o seguinte código:

<style type='text/css'> #makingdifferentpopup{ 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; } #makingdifferentpopup span{ font-size:20px !important; font-weight:bold !important; } #makingdifferentpopup h1{ background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWahI9HVqQ6B-H3Ay0s22We8b6O6nsRGQ5i6RUw8LEcpA9MFeA89UZQsIfam65BkL5EltY0udgMUYoJW70xoegXyOs1RnnpMgb-vi4BqJia8wjfCnRWUmQr52DfYHLSO1x9k56jURCogy/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:&quot;lucida grande&quot;,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:&quot;lucida grande&quot;,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;
}
.grabthis{
bottom:80px;
font:8px &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {var sec = 10
var timer = setInterval(function() {
   $(&quot;#mdfooter span&quot;).text(sec--);
   if (sec == 0) {
      $(&quot;#makingdifferentpopup&quot;).fadeOut(&quot;slow&quot;);
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery(&quot;#makingdifferentpopup&quot;).css({&quot;top&quot;:mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup)
.resize(makingdifferent_ppopup)
 //alert(jQuery.cookie(&quot;sreqshown&quot;));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery(&quot;#makingdifferentpopup&quot;).width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;1&quot;, left: &quot;0&quot; , left:  mdleftm}, 0).show();
     jQuery(&quot;#mdclose&quot;).click(function() {
jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;0&quot;, left: &quot;-5000000&quot;}, 1000).show();});}); </script> <div id='makingdifferentpopup'> <h1>EI!?? CURTI MINHA FANPAGE</h1> <div class='htmlarea'> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/blogdoodneysales&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250' style='border:none; overflow:hidden; width:400px; height:250px;'/> <div class='grabthis'> </div> </div> <div id='mdfooter'>Espere por favor..<span>10</span> Segundos<a href='#' id='mdclose' onclick='return false;'>Sair</a> </div> </div> <!-- Fim do popup -->

3° Fazendo as alterações necessárias

Onde está EI!?? CURTI MINHA FANPAGE você irá obviamente mudar para o texto de sua preferência.
Onde está blogdoodneysales você irá certamente mudar para o nome de sua página do facebook a não ser que você queira exibir a minha, rsrsrs.
Onde está Espere por favor.. você também pode mudar, beleza.
Agora o número 10 é o número de contagem regressiva, ou melhor o tempo em que a página do facebook aparecerá para o visitante até que ela suma e apareça somente em um outro carregamento de página (F5).

Créditos: Lembrando que todo esse código pertence ao site Making Different assim como os direitos autorais. É permitido somente fazer essas mudanças que te passei acima. Respeite a obra do autor, beleza?

Meus amigos, dúvidas comenta aí, beleza.

Share on Google Plus

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.