Como Colocar A Caixa Do Curtir Do Face Como Pop-up

| |
Oie gente hoje eu vou explicar como colocar a caixa do curti do Face como pop-up, tipo assim  você abre o blog e na página inicial aparece uma janela do face ou assinar o . Hoje vou ensinar como colocar do face.



1 -Acesse o painel do seu blog e clique na guia modelo.

2-Depois clique no botão Editar HTML.
3-Segure as teclas CTRL+F e procure por:
</head>


4-E, acima dele, cole o seguinte código:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
5- Em seguida, segure novamente as teclas CTRL+F e procure por:
]]></b:skin>

6-  E, acima dele, cole o seguinte código:

#fanback{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
#fan-exit{width:100%;height:100%}
#fanbox {background: white;width: 420px;height: 270px;position: absolute;top: 58%;left: 63%;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#fanclose {float: right;cursor: pointer;background: url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;height: 15px;padding: 20px;position: relative;padding-right: 40px;margin-top: -20px;margin-right: -22px;}
.remove-borda {height: 1px;width: 366px;margin: 0 auto;background:#F3F3F3;margin-top: 16px;position: relative;margin-left: 20px;}

7- E, pela última vez, segure as teclas CTRL+F e procure por:
<body>

8- E, abaixo dele cole o seguinte código:
<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DA SUA FAN PAGE AQUI&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E2E2E2&amp;stream=false&amp;header=false&amp;appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe>
</div></div>

Atenção: há um texto negritado, onde você irá substituí-lo pelo endereço de sua fan page, não se esqueça!

2 comentários:

  1. Muito bonito seu blog, obrigado por essa super dica, eu havia encontrado outra parecida pela internet, porém o like box era grande demais, ficava feio, finalmente encontrei o que queria, show de bola, parabéns!

    Graça e paz!

    ResponderExcluir
    Respostas
    1. Obgdaa que bomm que o Tutorial lhe ajudou fico feliz *--*

      Excluir

Antes de fazer um comentário, leia:

• Os comentários são moderados para que eu possa ter um melhor controle sobre eles.
• Deixe o link do seu blog no final do comentário.
• Seja educado (a) comigo e terá o melhor de mim! Faço tudo isso, não por obrigação, mas porque gosto.
• Seja específico ao pedir ajuda e eu te ajudarei no que for possível.
• Não ensino como fazer coisa assim-assado do blog do fulano.
• Não se dê ao trabalho de comentar com a intenção de me ofender. Eu não ligo para opiniões alheias e não tenho o costume de guardar comigo as ofenças que recebo.

Obrigada por comentar! :)

© Semeadores da Palavra de Cristo - 2013. Todos os direitos reservados.
Criado por: Hellen Isterfani.
Tecnologia do Blogger.
imagem-logo
Ultimas