[TUTORIAL] Redes sociais laterais

Personalizar o fórum se torna algo mais prático e fácil todos os dias. De toda maneira, disponibilizar conteúdo necessário para melhorar seu fórum é o principal foco de ser um grande webmaster. Neste tutorial, vamos personalizar as redes sociais flutuantes com efeito em JS.

--> Tutoriais <--
Redes sociais laterais

1º - Criar dois widgets personalizados:
Para que o código funcione é necessário criar dois widgets, um que ficará no topo da coluna e outro que ficará na parte inferior.

Para criar o widget teremos de aceder a:
Painel de controle -> Módulos -> Portal & Widgets -> Widgets do fórum
E carregar em:


2º - Códigos:
Este código pode ser personalizável, porém não edite os scripts para o efeito não parar de funcionar. Logo:

<script type='text/javascript'>jQuery(function() {
jQuery('#navigation a').stop().animate({'marginLeft':'-20px'},1000);
jQuery('#navigation > li').hover(
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-2px'},100);
},
function () {
jQuery('a',jQuery(this)).stop().animate({'marginLeft':'-20px'},1000);
}
);
});</script>
<style type="text/css">
/*** Forumactif desenvolvedores - FdF Italiano https://shift.forumactif.com/t368- ***/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top:30px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 30px;
}
ul#navigation li a {
display: block;
margin-left: -5px;
margin-top: 10px;
width: 45px;
height: 45px;
background-color:#ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #ffffff;
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
-khtml-border-top-right-radius: 5px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation li a:hover {opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
ul#navigation .rss a {
background-image: url(http://aux4.iconpedia.net/uploads/8055727531568015759.png);
}
ul#navigation .facebook a {
background-image: url(http://aux.iconpedia.net/uploads/17713447011803329858.png);
}
ul#navigation .twitter a {
background-image: url(https://i.servimg.com/u/f26/12/56/56/12/344.png);
}
ul#navigation .google a {
background-image: url(http://aux4.iconpedia.net/uploads/8055727531568015759.png);
}
/*** Forumactif desenvolvedores - FdF Italiano ***/
</style>
<ul id="navigation">
<li class="google"><a href="ENDEREÇO_DO_GOOGLE+" target="blank" title="Shiftactif no Google"></a></li>
<li class="facebook"><a href="ENDEREÇO_DO_FACEBOOK" target="blank" title="Shiftactif no Facebook"></a></li>
<li class="twitter"><a href="ENDEREÇO_DO_TWITTER" target="blank" title="Shiftactif no Twitter"></a></li></ul>

Modifique os locais que estão em vermelho pelo endereço da rede social desejado. Todos os direitos reservados para Nerissa, Adminactiva do serviço de suporte Italiano! Por favor, não remova os créditos do CSS.

• Resultado:
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Redes sociais laterais