TUTORIAL - PopUp da página do facebook no blogger

Oi! Vou começar uma série de tutoriais. Todos os dias vou postar um tutorial ok? Comecemos por um pop up da página do facebook no blogger. Vamos?

Preview:

Preview do blog Burn Everything

1. Acesse seu blog e vá em "Layout".
2. Clique em "Adicionar Gadget" e escolha "HTML/Javascript"
3. Cole o seguinte código:

<!-- 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/AVvXsEhmBfwHCEIKRkgLtqSV6qi0P2tFdfsXvFySrJw216BF7iaMnL0Ichda8hGpnsGG76pkf7oOP6qsZ1jmkGoxRQYvlfWQ13xQOmDe3PzaKioNAv-rnrMVeKP1rYLYn6UH5DzqDnLFxiuZ1baU/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 -->

 ENTENDENDO O CÓDIGO - O QUE MUDAR?

Mudaremos apenas o que está em negrito. Entenda:

• 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, por exemplo, você pode mudar para Por favor aguarde <span>10</span> segundos
• Em Curta nossa Fanpage, representa o título da popup, altere caso desejar, por exemplo "Curta a página do blog".
• Em SUAPAGINAAQUI, troque por o que está depois de https://www.facebook.com/ na sua página. Por exemplo, o link da página é https://www.facebook.com/brandndblog, então você colocará brandndblog.

OBSERVAÇÃO: Caso não esteja funcionando a popup em seu blog, pode ser a falta da biblioteca jquery instalada, tente esse processo:

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'/>

CRÉDITOS PRODEVELOPER 

Posted by: