[TUTORIAL] Redes sociais laterais deslizante

Item: [TUTORIAL] Redes sociais laterais deslizante
Rating: 1

por **Shek** Dom 10 Fev - 21:02

[TUTORIAL] Redes sociais laterais deslizante Homepg10

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

1º - 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.

2º - 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="https://www.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

[TUTORIAL] Redes sociais laterais deslizante Faq10

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