Personalizando Menu com Abas: Submenu


Ol├í meus amores, depois que postei ontem o Tutorial de como personalizar o Footer do post a pedido de uma leitora, recebi varios pedidos de novos tutoriais...

E a pedidos de algumas leitoras, vim trazer para voces um tutorial bem simples, os creditos vao para Dicas para Blogs.

Confiram como ficou no blog de teste: DEMONSTRAÇÃO

Bem...
Entre na pagina layout > adicionar gadget >  html/javascript e cole o c├│digo completo.


<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;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: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#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'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>

Procure por:

/* Tabs

E Abaixo dele selecione todo codigo at├ę antes de /* Headings e substitua por


#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;

Altere as cores de acordo com o tema do seu blog, confira aqui uma Tabela de cores Online 


Cores dos Bot├Áes do Sub-Menu

Para alterar cores:

#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.

#nav li a, #nav li a:link, #nav li a:visited - Cores dos bot├Áes do sub menu

#nav li a:hover, #nav li a:active - Cores dos bot├Áes do submenu quando o mouse est├í sobre eles.


Colocar ou Alterar os links do Sub-Menu

Vamos usar como exemplo apenas um trecho do código do submenu para explicar como você deve modificá-lo no seu blog.

<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>



Na primeira linha voc├¬ deve somente alterar o texto LINK1. Esse ├ę o texto que aparece no MENU e onde tem LINK sao as abas do submenu.

Onde tem escrito: url da pagina substitual pelo link da pagina determina.


Bom, espero que voces tenham gostado!
Se voce deseja um layout personalizado para seu blog contrate meu servi├žo!
Confira AQUI meu portif├│lio.



7 comentários

  1. Reh, o meu quaase deu certo... Não ajustei as cores no lugar certo, e quando eu tiver mais links vou usar esse tutorial melhor... MUITO OBRIGADA!!!!

    ResponderExcluir
  2. Ele serve para depois do cabe├žalho ou s├│ para o topo do blog?

    ResponderExcluir
  3. Não deu certo! Ainda bem que foi em blog teste!

    ResponderExcluir
  4. Olá querida. Amei o seu blog, e gostaria que você postasse um tutorial de como fazer um menu igual ao do seu blog.

    http://livingtoholiness.blogspot.com/

    ResponderExcluir
  5. o meu nao deu certo, da como se as paginas nao existissem, o que eu fa├žo?

    ResponderExcluir

Mande seu coment├írio, criticas, elogios ou sugest├Áes.
Responderei o mais r├ípido poss├şvel.
Um forte abra├žo.