quinta-feira, 17 de outubro de 2013

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

23 comentários:

  1. Adorei... Precisando aprender a mexer mais no blog. Bjs
    Vivi e isaac

    ResponderExcluir
  2. que dica maravilhosa
    amei o tuto

    lindo dia bjs

    http://sermamaepelasegundavez.blogspot.com.br/

    ResponderExcluir
  3. legal a dica, mas nao gosto
    acho que isso atrapalha...
    bjos

    ResponderExcluir
  4. Minha querida
    Vivendo e aprendendo!!!
    Muito obrigada.Eu não sei nada de Informática...Aos poucos,com a minha amiga,vou ficando a saber mais.
    Hoje, o meu blog completa um ano.
    Se quiser fazer-me uma visita,terei o maior prazer.
    Beijinhos
    Beatriz
    VIDA E PENSAMENTOS
    http://pegadasdeanjo.blogspot.com

    ResponderExcluir
  5. Eu tenho , acho super legal!

    Bjos

    http://www.maesbrasileiras.com.br/2013/10/parece-gripe-mas-e-sinusite.html

    ResponderExcluir
  6. Que dica legal, eu não gosto muito, pois sempre aparece quando mudamos a página, mas para quem gosta foi uma ótima dica.

    beijos

    ResponderExcluir
  7. ótima dica!
    bjus
    http://estou-crescendo.blogspot.com.br/

    ResponderExcluir
  8. Boa dica, eu ainda não coloquei, estou estudando os prós e contras...
    bjsss
    www.reinomae.com

    ResponderExcluir
  9. amei a dica ...
    http://euvireimamae.blogspot.com.br/

    ResponderExcluir
  10. Adorei a dica
    beijos
    onossonude.blogspot.com.br

    ResponderExcluir
  11. Amiga, confesso que não gosto dessa caixinha... às vezes trava tudo pra mim... bjs

    ResponderExcluir
  12. Aderi .. Tbm sempre quis fazer, depois vou tentar ..
    Obrigada

    Beijos Mi Gobbato
    http://espacodasmamaes.blogspot.com.br/

    ResponderExcluir
  13. Que legal! Precisando saber mesmo!
    Bjos
    Tatty
    http://diariomaedeprimeiraviagemtatty.blogspot.com.br/

    ResponderExcluir
  14. Eu não sou muito fan dessa caixinha pois, mas pra quem gosta vale a dica
    bjs!!

    Carlah Ventura
    Blog Intensa Vida

    ResponderExcluir
  15. às vezes em colocar, mas tem gente que não gosta... fico sempre em dúvida...rsrs

    Grande beijo, Genis
    http://www.reciclandocomamamae.com/
    http://umdivapara3.blogspot.com.br/
    http://www.mamaesemrede.com/

    ResponderExcluir
  16. Bela dica, a gente smpre na busca de uma novidade pra melhorar o nosso blog

    Bjinhos

    mamaenathan.blogspot.com

    ResponderExcluir
    Respostas
    1. COm certeza ... nem todo mundo gosta .. eu acho legal .. bjs

      Excluir
  17. Esse eu não sei fazer,Roberta.Tenho face book,mas quase não abro.No meu blog,tem um atalho para ele.

    Adorei essa parte de dicas!

    Beijinhos

    Dryka


    Blog Suas Histórias Nossas Histórias

    Face Book: Adriana Paz

    ResponderExcluir
  18. Que dica legal, vou salvar nos rascunhos do blog para quando precisar
    beijo

    ResponderExcluir
  19. Não deu certo :(
    beijos
    Juh
    www.territoriodemeninas.com.br

    ResponderExcluir
  20. Tentei e nao deu certo, acho que estou fazendo algo errado =(

    ResponderExcluir

Ser feliz é um estado de espírito. É ver o lado bom das coisas e das pessoas, é perdoar e pedir perdão, é fazer algo sem esperar nada em troca, é dizer eu te amo e abraçar quando der vontade, é aproveitar cada segundo ... vivendo cada dia intensamente, como se fosse o último, pois não sabemos se vamos estar aqui amanhã ...