Humor Nota 10!

Você não está conectado. Conecte-se ou registre-se

[TUTORIAL] COLOCANDO MENU NO FOOTER

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

19xStudio [TUTORIAL] COLOCANDO MENU NO FOOTER em Sab Set 15, 2012 1:29 pm

Sayori

avatar
Gerente
Gerente
[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.

--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Menu no Footer


- 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;
}

- 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á.

- Resultado final

Clique no link para visualizar o resultado >> LINK

29xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Sab Set 15, 2012 5:31 pm

TheLord

avatar
Administrador
Administrador
Excelente o tópico Camila. esta de parabéns!

http://humor-nota10.olympicweb.net

39xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Dom Set 16, 2012 11:51 pm

Conrado

avatar
Administrador
Administrador
Tópico bem organizado gostei do resultado final.

49xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Seg Set 17, 2012 3:02 pm

Sayori

avatar
Gerente
Gerente
Obrigada meus queridos pelos elogio.

59xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Sex Set 21, 2012 7:23 pm

Cronos

avatar
Gerente
Gerente
o Resultado é muito bom. eu nem sabia que tinha código pra isso.

69xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Qua Set 26, 2012 9:19 pm

Daniel

avatar
Membro Expert I
Membro Expert I
Bom topico camila , ficou perfeito

79xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Qui Set 27, 2012 1:02 pm

Sayori

avatar
Gerente
Gerente
Daniel escreveu:Bom topico camila , ficou perfeito
Muito Obrigada Daniel pelo seu comentário

89xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Qui Set 27, 2012 5:44 pm

Daniel

avatar
Membro Expert I
Membro Expert I
Camila.Pereira escreveu:
Daniel escreveu:Bom topico camila , ficou perfeito
Muito Obrigada Daniel pelo seu comentário
Mas so estou falando a verdade

99xStudio Re: [TUTORIAL] COLOCANDO MENU NO FOOTER em Dom Set 30, 2012 1:54 pm

Cronos

avatar
Gerente
Gerente
O resultado fica ótimo cara, nossa perfect

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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