[TUTORIAL] Menu no Footer
Nesse tutorial vou estar ensinando como colocar um menu no footer(rodapé) do fórum.
Funciona em todas as versões, eu acho.Nesse tutorial vou estar ensinando como colocar um menu no footer(rodapé) do fórum.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Menu no Footer
[TUTORIAL] Menu no Footer
1º - Adicionar o CSS
Painel de Controle >> Visualização >> Cores >> Folha de Estilo css >>
- Código:
#footerSw {
width: 100%;
background: #262626;
color: #E1E1E1;
padding: 1em 1em 1em 10em;
text-align: center;
display: table;
border-top:3px solid #111;
}
#footerSw > li {
position: absolute;
right: 5em;
bottom: 2em;
}
#footerSw {
position: relative !important;
}
#footerSw p {
margin: 20px 0px;
float: left;
font:12px Tahoma;
}
#footerSw ul {
float: left;
list-style: none;
text-align: center;
margin: 0 auto;
width: 15em;
padding: 1em;
}
#footerSw li {
display: block;
padding: 1px;
text-align: left;
}
#footerSw h2 {
font: 20px "Century Gothic", Verdana, Geneva, sans-serif;
color: #F60;
margin-bottom:6px;
}
#footerSw a {
color: #F1F1F1;
text-decoration: none;
}
2º - Adicionar JS
Painel de Controle >> Módulos >> HTML & JAVASCRIPT >> Códigos JavaScript >> Criar um novo JavaScript
- Código:
$(document).ready(function(){
$('body').append('<div id="footerSw">
<ul>
<li><h2>Ajuda</h2></li>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">Pedidos de Códigos</a></li>
<li><a href="#">Pedidos Gráficos</a></li>
<li><a href="#">Areá VIP</a></li>
</ul>
<ul>
<li><h2>SpDesign </h2></li>
<li><a href="#">Termos e Condições</a></li>
<li><a href="#">Política de Privacidade</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
<ul>
<li><h2>Social</h2></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Blog</a></li>
</ul>
<ul>
<li><h2>Contatos</h2></li>
<li><a href="#">teste@email.com</a></li>
<li><a href="#">Live Chat</a></li>
</ul>
<p>Todos os direitos reservados a SpDesign - 2012 | Desenvolvido por: Switch</p></div>');
});
Dica: Não marque na opção "Em todas as páginas", marque em todas menos na opção "Em todas as páginas" ok ? si você marca nessa opção o código não funcionará.
3º - Resultado final
Clique no link para visualizar o resultado >> [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]