Menu com várias Abas para Blogger!

Uma das coisas mais procuradas na Blogosfera, são menus de navegações. E e mais procurado ainda o famoso menu Dropdown, que e aquele menu que quando passamos o mouse aparecem variás abas ou seja "casas". [Confira o PREVIEW].

Na internet encontramos vários estilos diferentes, mais com uma instalação bem complicada. Por isso trouxe para vocês um código bem simples, confira o passo a passo abaixo:

1- Ascese a página MODELO em seu blog e em seguida click em EDITAR HTML. Com a página aberta aperte Ctrl+F, e na caixinha que aparecer coloque ]]></b:skin> e aperte enter. Quando encontrar a tag, logo acima dela coloque o seguinte código:

/* MENU - DESIGN MANIA
----------------------------------------------- */
#menuWrapper {
width:1000px; /* Tamanho do menu */
height:40px; /* Altura do menu */
padding-left:15px; /* Margem a Esquerda */
margin-top: 20px;
background: #ffffff; /* Cor de fundo */
overflow: visible;
border-bottom: 1px solid #00CC66; /* Cor da Borda */
z-index: 999;
}
.menu {
width: 100%;
float: left;
font: 17px 'Source Sans Pro'; /* Tamanho e Fonte */
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 0px 0px; /* Bordas aredondadas do sub-menu */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
border-right: 0px solid #fff;
color:#666666; /* Cor do Link Ativo */
display:block;text-transform:none;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 16px; /* Espaço entre Título */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #9933FF; /* Cor das casas ao passar o cursor */
color:#fff ; /* Color da Fonte */
text-decoration:none;
}
.menu li ul {
background:#9933FF ; /* Cor de fundo do sub-menu */
color: #fff !important;
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:999;
border-top:2px solid #fff; /* Borda superior do sub-menu */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 0px 0px; /* Borda das sub-casas */
}
.menu li ul a {
display:block;
height:40px;
font-size:16px;
color:#fff !important;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: #00CC66 ; /* Cor das sub-casas ao passar o cursor */
color:#fff !important;
border-top: 0px solid #fff;
text-decoration:none;
}

As partes em marrom, são as dimensões do menu: tamanho, altura e margens; as na cor verde são as cores do menu; as em laranja são as bordas, que podem ser arredondadas ou não; já a na cor azul e a fonte e seu tamanho. Você pode encontrar cores personalizadas [AQUI]. Salve

2- Para adiciona-lo aperte Ctrl+F novamente e na caixinha que aparecer coloque </header>. Quando encontrar acima da tag localizada coloque o seguinte código:

<div id='menuWrapper'>
    <div class='menu'>
    <ul>
    <li><a href='#'>Home</a></li>
 
    <li><a href='#'>Sobre nós</a>
    <ul>
    <li><a href='#'>Sobre1</a></li>
    <li><a href='#'>Sobre2</a></li>
    </ul>
    </li>

    <li><a href='#'>Casa</a>
    <ul>
    <li><a href='#'>Sobre1</a></li>
    <li><a href='#'>Sobre2</a></li>
    <li><a href='#'>Sobre3</a></li>
<li><a href='#'>Sobre4</a></li>
    </ul>
    </li>

<li><a href='#'>Culinária</a>
    <ul>
    <li><a href='#'>Sobre1</a></li>
    <li><a href='#'>Sobre2</a></li>
    <li><a href='#'>Sobre3</a></li>
    <li><a href='#'>Sobre4</a></li>
<li><a href='#'>Sobre5</a></li>
<li><a href='#'>Sobre6</a></li>
    </ul>
    </li>

<li><a href='#'>Vida</a>
    <ul>
    <li><a href='#'>Sobre1</a></li>
    <li><a href='#'>Sobre2</a></li>
    <li><a href='#'>Sobre3</a></li>
    <li><a href='#'>Sobre4</a></li>
    </ul>
    </li>
<li><a href='#'>Família</a>
    <ul>
    <li><a href='#'>Sobre1</a></li>
    <li><a href='#'>Sobre2</a></li>
    <li><a href='#'>Sobre3</a></li>
<li><a href='#'>Sobre4</a></li>
 
    </ul>
    </li>
<li><a href='#'>Nós por aí</a></li>
<li><a href='#'>Novidades especiais</a></li>

<li><a href='#'>&#187; ACESSE O TUTORIAL</a></li>
    </ul>
</div></div>

Agora e só preencher com suas informações e links e Salvar. Lembrando que ele não deve ser colocado em gadjets, pois não funciona. Veja como fica AQUI.

◣ESTE CÓDIGO FOI TOTALMENTE PRODUZIDO POR DESIGN MANIA.

SE FOR REPOSTAR OU USAR DEIXE CRÉDITOS!◥