Como colocar popup da sua fan page ao abrir seu blog

lá amiguinhas ... sempre tive uma vontade danada de saber como colocar esta janelinha de curtir da nossa fan page logo quando entramos no blog e não sabia como. Mas outro dia achei um link bem legal e o melhor fácil, que funcionou. Então quero dividir e passar pra vocês também ... ou para ensinarem pra alguém, que como eu sempre quis saber fazer claro ... rsrsrs ... Vamos lá??!!

1. Vá em Desing
2. Clique em adicionar um gadget
3. Escolha a opção html/Javascript
4. Copie o texto abaixo e cole no gadget em conteúdo, não precisa por título.


<!-- 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/AVvXsEgg0yJlYRq2MPzfM3wXjozLg7o97or9PUKdZ69GZJw77bBOzHNFgwfOKP2RGbEXPO5rvkfCwJy6XfEH_PHUCPxylO5qred_VcoikFLWYedjGh-30SGEC8Oroid8UMilA8YvSvB3B7JkY8TZ/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 página do facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%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 -->

5. Em SUAPAGINAAQUI, troque pelo nome de sua página ou em alguns casos o ID (Anteção: O ID são os números que ficam no nosso endereço. (ver ex. https://www.facebook.com/pages/Di%C3%A1rio-de-uma-Princesa/466678853384309?ref=hl.), aqui estão destacados em vermelho.

6. Clique em "Salvar" e depois "Salvar Organização".
7. Vá em seu blog e veja o resultado. 

Espero que tenham gostado ... hehehe amigas. Sempre que eu descobrir ou aprender outras coisinhas legais para nossos blogs, venho correndo contar e postar pra vocês ok?!! 

Ficarei feliz se divulgarem meu link na sua próxima postagem .. indicando este cantinho. Que por uns instantes também lhe proporcionou motivos para estar e ser feliz ... rs

Desde já agradeço .. bjsssssssss