ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo 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!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4865
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

[TUTORIAL] Redes sociais laterais deslizante

em Dom 10 Fev - 21:02


HTML & JavaScript


Com este código HTML, podemos adicionar um pequeno efeito que fica ao lado do seu fórum mostrando ícones de redes sociais, regras, tópicos ou outros dados importântes para você.



--> Tutoriais <--
Redes sociais laterais deslizante



- Código CSS:
Vamos primeiramente adicionar o código CSS. Para isso, você deve saber que todo código CSS pode ser personalizado pelo próprio administrador, então aconselhamos que tenha atenção no código abaixo:
#rede_social_flutuante{
list-style:none;
position:fixed;
z-index:5;
right:-30px;
top:130px;
width:40px;
padding:8px 5px;
border:2px solid #fff;
border-right:none;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
border-radius:10px 0 0 10px;
-moz-box-shadow:0 0 7px rgba(0,0,0,.6);
-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);
box-shadow:0 0 7px rgba(0,0,0,.6);
background: #fff;
}
#rede_social_flutuante li{
margin:9px 0 0 0;
line-height:0;
}
#rede_social_flutuante li:first-child{
margin-top:0;
}
Azul: Fundo da caixa lateral.
Índico: Largura do fundo branco que suporte as redes sociais ou informações da caixa.
Laranja: Altura do objeto na página.
Vermelho: Posição do objeto para a direita. Quanto maior o valor, mais para esqueda o objeto estará indo.


- Personalização do código HTML:
Basta adicionar o código HTML para obter o resultado.
<ul id="rede_social_flutuante">
<li><a href="https://www.facebook.com/ShiftActif" title="Curta-nos!"><img src="http://cdn3.iconfinder.com/data/icons/socialnetworking/32/facebook.png"></a></li>
<li><a href="https://twitter.com/#!/shiftactif" title="Siga-nos"><img src="http://cdn3.iconfinder.com/data/icons/socialmediabookmark/32/twitter.png"></a></li>
<li><a href="http://youtube.com/user/Shiftactif" title="ShiftActif no Youtube"><img src="http://cdn4.iconfinder.com/data/icons/vector_social_media_icons/32px/youtube.png"></a></li>
<li><a href="http://www.shift.forumactif.com/f2-" title="Suporte grátis"><img src="http://cdn1.iconfinder.com/data/icons/Aristocracy_WebDesignTuts/32/Lifebuoy.png"></a></li>
</ul>
Ao colar o código em seu fórum, observe que dentro do HTML há trechos com o nome "ShiftActif", basta modificá-lo para o nome da rede social que pertence o seu fórum.


  • Onde adicionar?
    Em qualquer local que aceita o HTML. Já em fóruns PhpBB2 e PunBB, aplique o mesmo após a tag indicada abaixo:
    Código:
    <body>

  • Resultado





© ShiftActif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Redes sociais laterais deslizante
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum