CRIAR E COLOCAR UM MENU COM SUB-MENU NO BLOG

Aprenda a criar e colocar um menu com submenu no blog usando códigos HTML e CSS. Inserir um submenu no blog pode ajudar a organizar seu conteúdo deixando mais fácil as pessoas encontrarem o que procuram. Além disso, esse tipo de menu ajuda você as postagens que acha as mais importantes do seu site.

Como você notará esse é um código grande, mas basicamente ele se divide em duas partes: estilos CSS (aparência do menu) e os links que você quer colocar no menu e sub menu do blog. Então vamos falar sobre esses assuntos separadamente.

Criar e Colocar um Menu com Sub-Menu no Blog

O jeito que colocar esse código que vamos mostrar é muito simples apenas 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>

Embora seja simples de colocar existem muitas coisas que você precisa personalizar no submenu antes de colocar no seu blog então veja os detalhes abaixo.

Alterar Aparência do Menu do Blog

Será necessário entender um pouco de CSS para editá-lo, mas depois que começar verá que é mais fácil do que parece.

Cores dos Botões do Sub-Menu

Em varias partes do código você poderá notar a indicação edite a cor do link, portanto só precisa alterar as cores naqueles locais. Veja abaixo uma relação com o nome de alguns dos estilos e o que eles controlam:

#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>
<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. Usando como exemplo um blog sobre programação da televisão então escreveríamos filmes no lugar de LINK1.

As outras linhas do código:

<li><a href='url da pagina'>LINK</a></li> 
É uma repetição para cada tipo de filme (continuando nosso exemplo), então o código ficaria assim:

<li><a href='url da pagina'>Comédia</a></li>
<li><a href='url da pagina'>Suspense</a></li>

E quantas outras opções você desejar. Lembrando que onde está url da pagina você deve colocar o link para uma Pagina do seu blog  que fala sobre aquele assunto.

As outras partes deste submenu são apenas repetições deste trecho e você poderá editá-las sempre..