Menu com abas e sub-abas para o blog.

|


Aprenda a colocar um menu com abas e sub abas no blog e organize melhor o conteúdo e facilite o seu leitor na hora de procurar o assunto.

Menu de abas e sub abas para o blog

Olá,queridos amigos!!

Mais um tutorial para você aprender e organizar o conteúdo do seu blog.Aprenda a colocar um menu de abas e sub abas de forma bem fácil.


Lembrando que devemos respeitar as vírgulas, aspas de dentro de um código,pois qualquer descuido, o código não funcionará.

Copie o código abaixo e vá até LAYOUT+ADICIONAR UM GADGET+HTML/JAVASCRIPT e cole o código e faça as alterações se quiser no código.Vamos lá??


<style type="text/css">
#NavbarMenu {
background: #F20767; /*--cor do menu--*/
color: #FFF; /*--cor da fonte do menu--*/
font-size: 13px; /*--tamanho da fonte--*/
font-family: Arial, Tahoma, Verdana; /*--tipo da fonte--*/
width: 100%;
height: 35px;
font-weight: normal; /*--estilo da fonte--*/
margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 13px;
font-family: Arial, Times New Roman;
font-weight: normal;
text-transform: nine;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*-- cor do link em estado hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #AA07F2; /*-- cor do menu em estado hover--*/
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #ffffff; /*--cor do link--*/
font-size: 13px; /*--tamanho da fonte--*/
font-family: Arial, Times New Roman;
font-weight: normal;
text-transform:none;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF; /*--cor e tipo da borda esquerda--*/
border-right: 1px solid #FFF; /*--cor e tipo da borda direita--*/
background-color: #0795F2;/*--cor de fundo das sub abas--*/
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #F2F007; /*--cor da sub aba ativa--*/
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href=ENDEREÇO DO BLOG'>PÁGINA INICIAL</a></li>
<li>
<a href='#'>NOME DA ABA 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 2</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 3</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li>
<a href='#'>NOME DA ABA 4</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO LINK'>NOME DA ABA</a></li>

</ul>
</div>
</div>
<div style='clear:both;'/></div> 

 

As alterações: 

 

Se você quiser mudar algo,pode, mas eu quando fiz no meu blog de Educação, não quis mudar nada,caso você queira, no começo do código,onde está escrito  <style type="text/css"> é a parte que pode ser alterada por vocês.

background: #F20767; /*--cor do menu--*/
color: #FFF; /*--cor da fonte do menu--*/
font-size: 13px; /*--tamanho da fonte--*/

 

 Para saber os códigos das cores, vou indicar um site que possui diversas cores em Html é só você escolher a cor e copiar o código dela.

Como editar as abas e sub-abas: 

           

<li><a href=ENDEREÇO DO BLOG'>PÁGINA INICIAL</a></li>
<li>
<a href='#'>NOME DA ABA 1</a>
<ul>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>

 

Aonde está escrito ENDEREÇO DO SEU BLOG, você colocará o link do seu blog.

Em ENDEREÇO DO LINK, você colocará o link do assunto que você fez.

Nome da aba 1: Ex: CAIXINHA MUSICAL ( é o nome da sua página )

Nome da sub aba: Ex:  ANIMAIS ( é o assunto,ou seja, músicas só de animais) e você vai fazendo assim por diante.

 

http://mundocoloridodacrianca.blogspot.com.br/

 Clique na imagem e veja como ficou no meu blog MUNDO COLORIDO DA CRIANÇA.

 

Se você não quiser as cinco sub abas, você poderá remover quantas quiser, mas cuidado para não apagar o código,ok. Exemplo: Eu ficaria só com 3 sub abas.

<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>
<li><a href='ENDEREÇO DO LINK'>NOME DA SUB ABA</a></li>

 


E ai amigos?? Gostaram??
Deixem seus comentários,pois é muito importante para o blog.Bjss!!!!



 

Comentários
9 Comentários
                       
                                                   
                                                                           

9 comentários

  1. Oi amiga!
    Muito boa a postagem, super fácil de entender até para mim que sou bem leiga no assunto. Parabéns!
    Bjokas da Vaci :*

    ResponderExcluir
  2. Oi amiga que tudo esse tutorial,vc sempre nos repassando o que vc aprende,só temos que agradecer.
    Fiz em meu blog de texte e ficou show,acho que aprendi direitinho desta vez.
    Bjsss

    ResponderExcluir
  3. Amei Magda...já fiz tudo e ficou lindo....só preciso de acertar uns pequenos detalhes....beijocas Linda Magda Moreira

    ResponderExcluir
  4. Magda, esse tutorial é muito bom mesmo. Eu já tinha feito isso em outro blog e ajuda muito a organizar. Ótimo compartilhar. Bjs
    Blog Ana Laura Artes

    ResponderExcluir
  5. Uma dica super preciosa para nós blogueiros, realmente as vezes queremos fazer mudanças e não sabemos como fazê-las. amei esse tutorial Magda, realmente muito bom! Obrigada por compartilhar!

    Bjos
    Minda =D

    ResponderExcluir
  6. EXCELENTE POSTAGEM AMIGA, SEUS POST SEMPRE TIRANDO MINHAS DUVIDAS.. EU TINHA CURIOSIDADE DE COMO FAZER AGORA APRENDI
    OBRIGADA POR SEMPRE PASSAR DICAS MARAVILHOSAS

    Esmalte&cia

    ResponderExcluir
  7. Quando eu for mudar, o layout do meu blog venho direto pra ca vou fazer dai esse menu no blog.;

    beijinhos

    ResponderExcluir
  8. O Meu é assim!!
    Ótima Dica, Para quem não sabe aprender!!
    vc sempre com post Excelente!
    Bjúús

    ResponderExcluir
  9. Esse tutorial é muito bom, ELAINE tem muitos tutoriais maravilhosos e isso ajuga muito a todos nós, obrigada Elaine e Magda por compartilhar conosco. beijos

    ResponderExcluir

Deixe um comentário, que ficarei muito feliz!!!!!
Abraços á todos!!!!