quinta-feira, 2 de julho de 2015

Pop up de curtir a Fan Page no blog

Gooodmorging
O que dizer dessas pessoas que somem do blog? Nada, apenas me amem <33333 haahuehauehae
Olhem só, foi por uma boa causa. Tive duas semana de provas fodidas na facul eeeeeeeee finalmente estou aceitando laytouts por encomenda õ/ õ/ õ/ (mããããs isso é assunto para um outro post).  

Enfim, hoje o tutorial é super simples. Se trata de colocar um pop up de curtir a fan page no blog, que é aquela caixa que aparece logo quando entramos em um site, nos convidando para curtir a página no Facebook.

É invasivo: SIM 
Funciona: SIM

OBSERVAÇÃO: É invasivo quando você entra em um site 10 vezes e ás 10 vezes aparece essa maldita caixa, ou quando é aquela TIME que precisa esperar o tempo que a pessoa colocou (tipo 1 minuto). Aí não rola, acho meio apelação e acaba funcionando por vencer a galera no cansaço, ou espantando de vez quem não tem paciência. Ou seja, não é bacana.

MÃÃÃÃÃÃS esse NÃO é o caso da pop up que vou ensinar hoje. 
Essa janelinha só vai aparecer uma única vez pra cada visitante, até que limpe o histórico. 
Não é apelativo, e ainda lembra o pessoal de curtir o seu trabalho. Caso contrário a fanpage fica lá, forever alone no cantinho da barra lateral, esquecida no esquecimento. 

Esquecida no esquecimento? kkkkkkkkkkkkk vamos prosseguir com o tutorial antes que venham mais frases Jackie Lispector. 

(A pop up vai ficar assim).

Copie esse código aqui: 

<style>#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}#cboxOverlay{position:fixed; width:100%; height:100%;}#cboxMiddleLeft, #cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left; margin:auto; border:0; display:block;}.cboxIframe{width:100%; height:100%; display:block; border:0;}#cboxOverlay{background:#000;opacity:0.5 !important;}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);}#cboxTopLeft{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 0;}#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x top left;}#cboxTopRight{width:14px; height:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--SeTA6D94zU/T42VTrX4TxI/AAAAAAAAD_c/AKhTRygNB7k/s75/border.png) repeat-x bottom left;}#cboxBottomRight{width:14px; height:43px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) repeat-y -211px 0;}#cboxContent{background:#fff; overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-E9dVofW8BBY/T42WBJ5M22I/AAAAAAAAD_w/w7AL0l9gVKk/s40/loading-background.png) no-repeat center center;}#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-ibVOtcbbUyU/T42WNcii6_I/AAAAAAAAEAE/Mrplo9QsPks/s32/loading.gif) no-repeat center center;}#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://lh3.googleusercontent.com/-E2COAfbIz9I/T42VA9FunjI/AAAAAAAAD_M/NKJf8y74BKs/s225/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}#cboxPrevious{left:0px; background-position: -51px -25px;}#cboxPrevious.hover{background-position:-51px 0px;}#cboxNext{left:27px; background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0px;}#cboxClose{right:0; background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}#subscribe {font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;}#subscribe a,#subscribe a:hover,#subscribe a:visited {text-decoration:none;}.box-title {color: #3B5998;font-size: 20px !important;font-weight: bold;margin: 10px 0;border:1px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow: 5px 5px 5px #CCCCCC;padding:10px;line-height:25px; font-family:arial !important;}.box-tagline {color: #999;margin: 0;text-align: center;}#subs-container {padding: 35px 0 30px 0;position: relative;}a:link, a:visited {border:none;}.demo {display:none;}</style><script src='http://yourjavascript.com/1029251148/jquery.min.js'></script><script src="http://yourjavascript.com/1141272178/jquery.colorbox-min.js"></script><script type="text/javascript">jQuery(document).ready(function(){if (document.cookie.indexOf('visited=true') == -1) {var fifteenDays = 1000*60*60*24*30;var expires = new Date((new Date()).valueOf() + fifteenDays);document.cookie = "visited=true;expires=" + expires.toUTCString();$.colorbox({width:"350px", inline:true, href:"#subscribe"});}});</script><!-- This contains the hidden content for inline calls --><div style='display:none'><div id='subscribe' style='padding:10px; background:#fff;'><center><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnomedafanpage&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center></div></div>
Agora vá em: 



No trecho destacado de vermelho coloque o nome da sua fanpage. 

Exemplo: 
você irá colocar o que está escrito nessa parte destacada.

Mas jackie a minha não tem nome e só números, como faz? 

Dai vc põem esse trecho:
 

Agora é só salvar (:

Créditos: http://www.ferramentasblog.com/

Fácil né? Espero que tenham gostado, beijos <3


21 comentários :

  1. Sempre quis colocar essa janelinha, mas nunca consegui. Não dava certo /:
    Adorei o tutorial ♥
    Beijos
    http://ptrasdeumsorriso.blogspot.com.br/

    ResponderExcluir
  2. Eu acabo não comentando...muitas vezes comento pelo cel. aí fica mais complicado ainda essas "coisas" aparecendo... não gosto.
    Fujo!! rs


    Bjim ...
    blog Usei Hoje

    ResponderExcluir
  3. Adorei! Vou usar no meu blog, beijos!
    http://muitaaudacia.blogspot.com.br

    ResponderExcluir
  4. Dica maravilhosa bom final de semana.
    Canal:https://www.youtube.com/watch?v=eNNlFtDc1-o
    Blog:http://arrasandonobatomvermelho.blogspot.com.br

    ResponderExcluir
  5. Eu que o diga ( ... ) rs !!! DUAS SEMANAS INTENSA NA FACULDADE; FISCALIZANDO PROVAS E REFERENCIANDO LIVROS NA BIBLIOTECA. O blog fica um pouco largado, mais sempre volto também!!! \m/ Referente ao tutorial ótima dica! Já usei - Hoje já não uso mais - TALVEZ VOLTE A USAR... !!! Sr. Inconstante "eu" rsrs. Um excelente final de semana. Bjo.

    Acesse >> Blog Cereja Cariri

    ResponderExcluir
  6. Adorei esse mini tutorial ♥ Já estou usando lá no meu blog! haha
    Jackie, mencionei o seu blog, num post lá do meu blog! E ficaria super feliz se você desse uma olhadinha <3
    Beijinhos, Link do post que indiquei seu blog ♥

    ResponderExcluir
  7. Amei a dica, super boa.

    http://alinesecretplace.blogspot.com.br/

    ResponderExcluir
  8. Ah, sumiu mesmo hein menina, vinha aqui direto ver ser tinha atualização e nada, voltava triste e cabisbaixa, ou drama, rs .. Mas, sério, sempre que vinha aqui e não tinha atualização, ficava desanimada, pois sabe que sou sua fã.. sem adulação.. kkk, mas, realmente foi por uma boa causa hein .. Provas da facu é de matar!
    Ah, sobre o tutorial, eu sempre tive vontade de colocar essa caixinha, mas, nunca conseguia, ficava p da vida .. Adorei demais essa tutoria, perfeita! Ah .. vou encomendar um layout, sou apaixonada por seu trabalho, e sempre que tem lay novo aqui, me deixam boquiaberta.

    http://destinoincertoo.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nem me fale, semana de provas acaba cmg aheuhaeuhaeuhae
      Ah Danny é tão bom saber que tu gosta do blog, ainda mais pq eu sou apx pelo seu <3

      Pode encomendar, estou a disposição ;D

      Excluir
  9. Oi linda, vim te dar os parabéns pelo tutorial, me ajudou muito.
    Beijos e sucesso com o blog.

    Kryzia Canto
    www.kryziacanto.blogspot.com.br

    ResponderExcluir
  10. Ótimo tutorial Jackie, ainda bem que esse só aparece uma vez né! Por que é chato mesmo, toda vez que a gente entra, aparece. E aquele de um minuto então, nossa eu nem espero saio na hora rsrs. Obrigada pelo tuto, vou colocar em meu blog.
    Beijo!
    www.penultimoandar.com.br

    ResponderExcluir
  11. (tentando comentar pela 2x, acho q o primeiro bugou rsrs)
    Ainnn amei muito a dica e já estou usando. Gosto muito do seu blog, vou me condicionar a vim aqui mais vezes.
    Beijos Juh
    www.territoriodemeninas.com.br

    ResponderExcluir
  12. adorei, otimo tutorial

    Beeijos, te espero lá no meu blog ♥

    http://www.paaradateen.com
    http://www.facebook.com/PAARADATEEN

    ResponderExcluir
  13. Curti demais o tutorial e vê se não some hein...

    ResponderExcluir
  14. Jackie, eu amoo muito seu blog, você é minha blogueira favorita ♥ seu post me ajudou muito! Obrigadaaa ♥♥♥

    ResponderExcluir
  15. Jackie, porque ainda não voltou? Vá, deixa de ser preguiçosa e vem fazer posts para os seus seguidores ahahah
    Gostei do tutorial! :)
    Elefante MágicoInstagram

    ResponderExcluir
  16. adoreeeii,parabéns, to seguindo seu blog.

    http://subterefugio.blogspot.com.br/

    ResponderExcluir
  17. Pra mim não deu certo, tentei várias vezes! vou tentar novamente depois, talvez seja a configuração do meu Blog, obrigada pelo Post esta muito bem explicado. Beijos

    www.renatanerees.blogspot.,com.br

    ResponderExcluir
  18. Ameeeeei o tuto Jackie, só consegui desse modo que você ensinou!!!!

    http://paraisodosrabiscos.blogspot.com.br/

    ResponderExcluir

.