Tutorial: Menu de Abas

17:41 0 Comments A+ a-


Hey gente, hoje trouxe um pedido de tuto, quem pediu foi o traveler productions, para quem não sabe de qual  menu se trata e para o caso de em um futuro layout eu não utilizar esse menu aqui uma preview/print:


Eu o uso assim, mas da pra personalizar, vamos lá!
Primeiramente vá em seu HTML e procure por ]]></b:skin> e logo acima dessa tag cole esse código:




.tabberlive .tabbertabhide {
display:none;}
.tabber {}
.tabberlive {
margin-top:1em;}
ul.tabbernav{
margin:0;
padding: 3px 0;
font-family: PF Arma Five; /*Fonte do seu menu*/
font-size: 8px; /*Tamanho da fonte*/ }
ul.tabbernav li{
list-style: none;
margin: 0;
display: inline;}
ul.tabbernav li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #Código; /*Cor da borda*/
background: #Código; /*Cor do fundo*/
text-decoration: none;}
ul.tabbernav li a:link { color: #Código; /*Cor do link normal na caixa*/ }
ul.tabbernav li a:visited { color: #Código; /*Cor do link visitado*/ }
ul.tabbernav li a:hover{
color: #Código; /*Cor da fonte da aba selecionada*/
background:#Código; /*Cor da aba selecionada*/ }
ul.tabbernav li.tabberactive a{
color: #Código; /*Cor do link em hover*/
background-color: #Código; /*Cor da seleção*/
border: 1px solid #Código; /*Cor da borda da seleção*/ }
ul.tabbernav li.tabberactive a:hover{
color: #ffffff; /*Cor do texto selecionado*/
background-color: #FF8080; /*Cor da caixinha selecenionada*/ }
.tabberlive .tabbertab {
padding:5px;
border-top:0px none;
}
.tabberlive .tabbertab h2 {
display:none;}
.tabberlive .tabbertab h3 {
display:none;}
.tabberlive#tab1 {}
.tabberlive#tab2 {}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;}
Onde está escrito código você deve substituir pela cor dos códigos, você pode substituir utilizando esse gerador, o resto das instruções já está no próprio código.
Caso você queira exatamente igual ao menu que está na imagem é só pedir nos comentários que passo.
Agora, para adicionar o menu no seu blog você adiciona um gadget HTML/Java Script e cola isso nele e modifica como quiser:
<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}< \/style>');
</style></script>
<script type="text/javascript" src="http://static.tumblr.com/dlelfro/DZqmha795/javascriptkw.js"></script>
<br />
<div class="tabber">
<div class="tabbertab" title="Nome da sua aba">Conteúdo da aba 1 aqui</div>
<div class="tabbertab" title="Nome da sua aba">Conteúdo da aba 2 aqui</div>
<div class="tabbertab" title="Nome da sua aba">Conteúdo da aba 3 aqui</div>
</div><br />
Caso queira adicionar mais abas cole esse código antes de </div><br/>:
<div class="tabbertab" title="Nome da sua aba">Conteúdo</div>
E está feito!
Espero que seja útil <3
Beijos gente!

Sou Nathalia Nates, adolescente, confusa, que não sabe o que quer da vida, e por isso tenta de tudo(desistindo na maioria das vezes por ter medos e inseguranças).

Nasci em uma pequena cidade do norte do paraná, onde moro até hoje, com meus pais e meus dois cachorros.