Criar e Colocar um Menu com SubMenu com CSS 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. Os estilos CSS servem para formatar texto e no caso de criar um menu podemos fazer os botões usando CSS.

Basicamente você deve procurar por background para alterar a cor de fundo do botão do menu e color para mudar a cor do texto do botão. Veja onde estão as configurações mais importantes do sub menu. Veja nos links abaixo algumas dicas úteis sobre como alterar essas cores:
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS

Logo no começo do código temos o estilo da barra de menu completa.
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}

Então como falamos altere background: #555; (cor de fundo) e color: #FFF; (cor das letras). Claro que você pode mudar outras coisas como o tipo e tamanho das letras. Além disso, quando mais você souber sobre CSS poderá fazer outros testes para personalizar seu menu. Leia mais dicas sobre:
Código das Cores
Colocar ou alterar as bordas

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

Veja outras dicas úteis para seu blog:
Como Fazer um Menu Vertical Fixo no Blogger
Criar Banner para Blogs: Programas e Sites para Editar Imagens
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

Para terminar apenas mais uma dica para colocar o menu com submenu no seu blog. Justamente por ser um código com muitas possibilidades de alterações nós recomendamos que coloque o código no seu blog e faça as alterações aos poucos, sempre salvando uma copia do código que funcionou do jeito que você quer, assim se errar algo não perderá muito tempo e trabalho.