MASIGNCLEAN101

Confira 17 modelos de menus Drop Down para Blogger



Menus drop down são muito utilizados por ocupar pouco espaço e agregar praticamente tudo o que um blog pode oferecer ao leitor. Para adicionar um menu drop-down no blogger você precisa de um código HTML e CSS e principalmente inserir esse código no lugar certo em seu blog e pronto.

Disponho hoje, uma lista de 17 modelos de menus CSS horizontais. Pode acontecer que em alguns blogs, o menu não fique bem embaixo do cabeçalho, por isso acontece por causa da infinidade de templates disponíveis na internet que usam algum widget abaixo dessa tag, como exemplo algum script slider.

1. Menu Drop Down Azul Massive

Código HTML:


Código CSS:


2. Menu Drop Down Pôr do Sol 

Código HTML:


Código CSS:


3. Menu Drop Down Azul Dawn

Código HTML:


Código CSS:


4. Blue Center Drop Bar

Código HTML:


Código CSS:


5. Menu Drop Down Impressão Azul

Código HTML:


Código CSS:


6. Menu Drop Down Impressão Verde

Código HTML:


Código CSS:


7. Menu Drop Down Impressão Cinza

Código HTML:


Código CSS:


8. Menu Drop Down Tabs Azul

Código HTML:


Código CSS:


9. Menu Drop Down Tabs Amarelo


Código HTML:


Código CSS:


10. Menu Drop Down Tabs Cinza


Código HTML:


Código CSS:


11. Menu Drop Down Tabs Vermelho


Código HTML:


Código CSS:


12. Menu Drop Down Tabs Preto


Código HTML:


Código CSS:


13. Menu Drop Down Tabs Laranja


Código HTML:


Código CSS:


14. Menu Drop Down Simples Vermelho


Código HTML:


Código CSS:


15. Menu Drop Down Simples Preto


Código HTML:

Código CSS:

16. Menu Drop Down Simples Azul


Código HTML:


Código CSS:


17. Menu Drop Down Simples Verde


Código HTML:

Código CSS:


Como instalar o menu!


Existem duas maneiras de instalar o código HTML do menu. A primeira pode ser feita colando em um widget HTML/Javascript, e a outra, diretamente no código fonte. Vamos ao passo a passo das duas:

Diretamente no código fonte:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o comando Ctrl + F, procure por:  ]]></b:skin> e acima dela cole o código CSS do menu desejado.

3°passo: Se você quiser instalar o menu ACIMA do cabeçalho, basta localizar a tag : <header> e colar o código html do menu ACIMA desta tag. 
Mas se quiser que o seu menu fique abaixo do cabeçalho, instale o código HTML do menu ABAIXO da tag: </header> 
4° passo: Salve e veja as alterações.

Usando um widget Html/Javascript:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2° passo: Agora usando o comando Ctrl + F, procure por:  ]]></b:skin> e acima dela cole o código CSS do menu desejado.


3°passo: Salve e acesse a opção Layout, clique em adicionar um Gadget | Html/Javascript no local em que deseja o menu.

5° passo: Cole o código, realize as alterações dos links e pronto! 


Dúvidas? Deixe seu comentário!
Compartilhe esse artigo!
Marcus Vinicius
escreve para o Mundo Informal sob a licença Creative Commons BY-SA 3.0. Você pode usar e compartilhar este conteúdo desde que credite o autor e veículo original do mesmo.
avatar

Boa noite,
Marcus obrigado por compartilhar o conteúdo.
Ficou perfeito em meu blog, continue postando.
Att.

25 de maio de 2013 02:00
Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!