Menu Colors Dropdown- com abas e sub abas, colorido e lindo!

Algum tempo atrás eu mostrei aqui no blog uma opção bem bonita de menu horizontal, colorido e cheio de charme.
Recorde:
Menu Colors para blog- o menu mais fácil do mundo!

Hoje quero te mostrar uma versão mais moderna dele. Na verdade não chega a ser uma versão, trata-se de um menu bem diferente, mas como ambos compartilham o fato de serem coloridos e charmosos, achei que vale a comparação.
Estou falando desse menu, veja:


Demonstração do tutorial

Lindinho, né?
E se eu te disser que você consegue instala-lo em seu blog com apenas 1 passo? Aí fica perfeito, né?
Quer aprender?
Vem comigo, que é muito, muito fácil!

Como instalar o Menu Dropdown colorido no blog?

Essa versão que vou te ensinar é uma adaptação. Juntei no mesmo gadget o Código CSS, que define a aparência do menu, e o Código HTML, que é onde voce coloca seus links e modifica o nome das abas e sub abas.
Então, pra instalar é bem simples: acesse o painel de seu blog e clique em Layout.
A seguir clique em Adicionar um gadget e dentre as opções selecione HTML/JAVASCRIPT.
Na caixinha que expandir cole este código:


Copiar o código

Salve, arraste para onde deseja que fique (o ideal é abaixo do cabeçalho) e salve as alterações do Layout.
Seu menu já estará aparecendo.
Aí então é a hora de configurar os links, os nomes das abas e sub abas e editar as cores caso queira.
Deixei tudo especificado no próprio código; leia tudo pois ele te dirá exatamente o que fazer, onde alterar cores e onde inserir links e nomes das abas e sub abas.
Depois de tudo pronto é só salvar as alterações que fizer e tá feito!

Dicas extras:

Todas as cores, de todas as abas e sub abas são personalizáveis. Lembre sempre que cada cor é definida pelo código hexadecimal e pra alterar essa cor basta trocar o código dela pelo código hexadecimal da cor que você deseja.
Aqui tem uma tabela de cores e seus respectivos códigos.

Se o nome que você der para cada aba for grande o menu pode desconfigurar a as abas descerão. O ideal é ir editando, e se notar que as abas não cabem no espaço exclua alguma ou diminua o nome.
Para excluir uma aba é só excluir o código dela; está separadinho no código do menu, bem fácil de identificar.

Se quiser alterar a fonte e o tamanho dela também pode, basta localizar a área destinada a isso no código e alterar.

Caso tenha qualquer dúvida diga aí nos comentários e eu respondo assim que possível!
E, claro, pedir não custa: compartilhe ou curta esse post. Me ajuda demais!!!