ShiftActif fórum

[TUTORIAL] Box expansível do Facebook com efeito jQuery Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Box expansível do Facebook com efeito jQuery 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Box expansível do Facebook com efeito jQuery 1660898911

[TUTORIAL] Box expansível do Facebook com efeito jQuery

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Box expansível do Facebook com efeito jQuery Empty [TUTORIAL] Box expansível do Facebook com efeito jQuery

Mensagem por Sphartcus em Ter 27 Nov - 14:32

Box expansível do Facebook com efeito jQuery



O facebook é uma das redes sociais mais acessadas do planeta com mais de 1 bilhão de pessoas, quase a quantidade da população da China (1,3 bilhão e meio de pessoas). Por isso, a chance de aumentar as chances de ter seu fórum em primeiro lugar dos mais acessados, é usando uma caixa expansível do FB no fórum.



--> Tutoriais <--
Box expansível do Facebook com efeito jQuery





- Conceito básicos e direitos autoriais:
O código que vamos usar não foi desenvolvido por ShiftActif ou seus desenvolvedores. Este código está disponível em vários e vários sites da internet, principalmente em nosso blog ShiftActif. Decidimos trazê-lo como dica para ajudar na publicação do seu fórum, principalmente para usuários que tem uma "FÃPAGE" ou uma página no facebook.


- Código CSS:
Antes de tudo, temos que ter em mente que o CSS é indispensável neste momento por dois motivos.
  1. Ele personaliza sua função HTML;
  2. Ele muda a posição do objeto HTML para outras localidades da página.
Então acesse agora Painel de controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione o seguinte código CSS;
.box-curtir-flutuante{
background: url("http://3.bp.blogspot.com/-XmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;
display: block;float:
right;height: 270px;
padding: 0 5px 0 40px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px;
top:20%;
}
.box-curtir-flutuante div{border:none;position:relative;display:block;}
.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.box-curtir-flutuante span a{color: #808080;text-decoration:none;}
.box-curtir-flutuante span a:hover{text-decoration:underline;}
As imagens podem ser substituídas quando você desejar. Beleza!



- Adição dos códigos Javascript:
Nosso JS padrão continha o símbolo chamado de "Octuturpi" ($), que quando adicionado em um widget, se perde devido suas configurações. Neste caso, tivemos que modificar esse JS para que a função funcione normalmente em seu fórum. Primeiro de tudo, vamos adicionar um script bem conhecido na rede de códigos, o AJAX do GOOGLE.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Por padrão, temos que adicioná-lo por dentro das tags <head></head> do fórum, mas como fazer isso se não podemos editar os templates PhpBB3 e Invision? Vamos acessar o Painel de controle em Geral > Promoção do fórum > Motores de busca > Bazilas adicionais > clique no botão + e no tipo de adição, escolha "Linkar um Javascript" e adicione somente o endereço do link do JS:
Código:
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Automaticamente já teremos a tag Script adicionada entre essas tags HTML <head> e </head>. Sorriso

Feito isso, vamos acessar Painel de controle > Portal e Widgets > Gestão dos widgets do fórum > e dentro do mesmo widget com o código HTML que vamos criar, adicione este código Script:
Código:
<script type="text/javascript">
//<!-- ShiftActif - Dando mais vida a sua comunidade | Se tiver dúvidas, acesse o tutorial em www.shift.forumactif.com/
jQuery(document).ready(function() {jQuery(".box-curtir-flutuante").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
Ou se preferir, poderá adicionar em uma página JS:
Código:
//<!-- ShiftActif - Dando mais vida a sua comunidade | Se tiver dúvidas, acesse o tutorial em www.shift.forumactif.com/
jQuery(document).ready(function() {jQuery(".box-curtir-flutuante").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
Feito isso, salve e veja o resultado em seu fórum.



- Elementos HTML e suas configurações:
Temos então o código HTML e o JS. Porém, vamos adicioná-los em locais totalmente diferentes. Como assim? O código Javascript pode ser adicionado nas páginas JS, e o código HTML em um widget ou até mesmo no próprio JS.

Código:
<div class="box-curtir-flutuante"><div><iframe src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO_DA_SUA_PAGINA_NO_FB&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>

No lugar de "ENDEREÇO_DA_SUA_PAGINA_NO_FB" adicione o endereço da sua página no facebook. Por exemplo: https://www.facebook.com/ShiftActif Agora, você só precisa salvar!


  • Resultado previsto:
    [TUTORIAL] Box expansível do Facebook com efeito jQuery Result54





© ShiftActif


[TUTORIAL] Box expansível do Facebook com efeito jQuery Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Box expansível do Facebook com efeito jQuery
Sphartcus

Sphartcus
Moderactif
Moderactif

Masculino
Idade : 22
PointActif's : 2811
ReputActifs : 4
Mensagens : 47
Inscrição : 04/04/2012

100%

https://shift.forumactif.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum