6 de nov de 2012

Como criar um Super Menu Drop Down no Blogger

Durante os últimos dois anos, o mundo da Blogosfera progrediu muito generosamente. Hoje em dia blogueiros e webmasters estão se concentrando mais em seus sites e estão projetando ao invés de focar apenas em seu conteúdo. Sem dúvida, ter um site bonito é a última tendência e faz com que até mesmo os visitantes admirem os blogs, que são altamente profissionais em termos de layout, cabeçalho , rodapé, menu, e etc. Portanto, ter uma navegação limpa e bem proximo do que se pode considerar "perfeita" são as necessidades básicas de todos e de cada blog. No entanto, a maioria dos blogs ainda estão usando menus de navegação antigos, o que mata a primeira impressão de um blog. Se a navegação do seu site não é boa, então, como você pode esperar que os seus visitantes venham a procurar algo em seu site? Hoje vamos aprender como criar um novo mega menu drop-down para blogs do Blogger.


Por quê usar um Menu Drop Down

A maior vantagem de ter um menu de navegação Mega Drop Down é que ele mantém tudo o que você precisa em um só lugar, para que os visitantes não tenham que gastar muito tempo em busca de uma categoria específica de seu interesse. Por outro lado, ele vai manter em seu blog um olhar limpo e elegante, pois a navegação completa o site e mantém as coisas no lugar.

Como o Mega Menu Drop Down se parece

Ao contrário de outros menus Dropdown, esse tem um design elegante, que irá combinar o seu site ou blog, pois você pode facilmente mudar de cor de acordo com suas necessidades desejados. É fino em tamanho por isso é bastante claro que ele pode facilmente se adaptar a qualquer site, sem qualquer problema. A animação seguinte representa um prévia do Menu.

Como criar um Mega Menu Drop Down no Blogger

Assim como nossos tutoriais anteriores, os passos são muito simples e mundo dificilmente levar 10 minutos para completar a integração. Basta seguir as seguintes instruções corretamente.

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

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo 
 Fazer backup/Restaurar  Fazer download do modelo completo.

2° passo: Selecione Editar HTML →  Continuar.

3° passo: Agora, dentro da busca modelo para ]]> </ b: skin> e cole os seguintes códigos de folha de estilo:



4° passo: Novamente procure por </head> e ACIMA dele cole o seguinte código jQuery:




Salve as alterações antes de prosseguir a instalação do menu.



Adicionando o Mega Menu Drop Down no Blogger



Agora com a pesquisa do template, procure pelo seguinte trecho no seu código. Lembre-se que não é necessário que você tenha exatamente o mesmo código, apenas que se pareça com o código original que procuramos. 

DICA: Para encontrar rapidamente o código, pesquise por "Header1" ou "(Header)".




Depois de ter encontrado o código similar ao procurado, ABAIXO dela cole o seguinte código HTML do Mega Menu. 


Personalização


Substitua MUNDOINFORMAL com o seu usuário RSS feed e e-mail.

Substitua todos os que estiverem com a cor rosa claro, Laranja claro, azul claro de acordo com suas necessidades.


Fonte: Mybloggerlab.com
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

28 comentários

  1. Como faço para mudar as cores do menu?

    ResponderExcluir
    Respostas
    1. @Cássia Tamires, obrigado por participar! Mas para alterar a cor do menu, você precisaria editar as imagens usadas no menu. Diferente de outros menus que dispomos aqui, esse menu não tem suas cores definidas por CSS, mas por imagens pequenas que são repetidas ao longo do HTML do menu.

      Ex: http://1.bp.blogspot.com/-QlNjAxBB9YE/UGck33rIUgI/AAAAAAAAFsM/EnZ0AsEggjc/s1600/navigation.png

      Excluir
  2. Nossa, muito obrigada por responder. Vou mudar a cor dessa imagem, gerar link e substituir. Será que dá certo? Eu mudei todas as cores, menos a principal que é a azul escura.

    ResponderExcluir
    Respostas
    1. @Cássia Tamires, se você substituir corretamente, é certo que funcionará. O detalhe é a maneira que você vai editar as imagens, pois como são pequenas e se repetem, se você inserir uma borda ou algo do tipo na imagem, pode ser que ela não fique muito legal no menu....
      Se precisar de algo, é só perguntar. Ah, se estiver fazendo em um blog de testes, me envie o link para que eu possa te ajudar..
      Até mais.

      Excluir
  3. Eu fiz em um blog de testes sim, mas já coloquei no meu blog. Esse é o link: http://nosolhosdequemviu.blogspot.com.br/

    Eu tô mudando a aparência dele, hoje mudei o menu e o cabeçalho. Ainda não tá bom, eu tenho que mudar umas configurações e tirar uns detalhes que eu coloquei antes, mas vou com calma.

    Hoje depois de colocar o menu eu percebi que agora ao passar o mouse no cabeçalho ele fica branco. Você sabe como resolver isso? Queria o cabeçalho transparente tanto sem passar o mouse quanto quando passa o mouse. Se não souber tudo bem. Obrigada pelo tutorial, esse menu é maravilhoso!

    ResponderExcluir
    Respostas
    1. Cassia, como você fez para colocar aquele quadro com os posts do blogno inicio da página? beijos

      Excluir
  4. Meu menu tá dando muito problema, agora ele resolvei ficar atrás das postagens, acho que vou ter que tirar ele. Você conhece algum menu dorp down mais simples de fazer?

    ResponderExcluir
    Respostas
    1. Sim @Cássia! Dá uma olhadinha nesse post:

      www.mundoinformal.com/2013/03/confira-17-modelos-de-menus-drop-down.html

      Excluir
  5. por favor deu trabalho mais consegui colocar os menus sem problemas com slides ou outras coisas aparecendo fala pro pessoal coloca a taga z-index nos codigos para ter maior relevancia e e se sebrepor nos resto do template por exemplo se o menu fica em sima de um post ou slide com serteza os sub menus vão sumir e ate descobrir qual é o local exato que coloca a tag z-index da trabalho e coloca um valor bem alto porq se for imferior a outros z-index que tem no templte não vai resolver flw fica ai o alerta http://xxgamespc.blogspot.com.br/ da uma olhada ai o meu slide tava com z-index 400 tive que colocar um z-index 500 pro sub menu aparecer na frente do slide

    ResponderExcluir
    Respostas
    1. Obrigado pelo comentário Andrew! Vou verificar, e se tudo funcionar bem, altero a postagem e cito seu comentário...
      Abraço

      Excluir
  6. Olá... como faço pra alinhar o menu com o corpo do blog?

    ResponderExcluir
    Respostas
    1. Basta inserir a tag de abertura(center) antes e depois do código html do código.

      Basta inserir a tag de abertura(center) antes e depois do código html do código.

      <center>
      <ul id="nav-one" class="dropmenu">
      <li>
      <a href="#">Home</a> </li>
      <li>
      <a href="#">Forum</a><ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Examples</a></li>
      <li><a href="#">Your work</a></li>
      </ul>
      </li>
      ... restante do código ...
      </center>

      Excluir
  7. AMEII MUITO INTEREÇANTE:)

    ResponderExcluir
  8. sera que voce poderia quebrar um galho pra gente aqui do blog colocando esse tutorial do menu no nosso blog

    ResponderExcluir
  9. sera que voce poderia quebrar esse galho pra gente colocando esse menu em nossa pagina do blog ??

    ResponderExcluir
  10. Cara falta imagens ajuda aee posta umas pelo menos

    ResponderExcluir
    Respostas
    1. Mais imagens? Seria uma pré-visualização?

      O gif que inseri no post ilustra bem seu funcionamento...
      http://1.bp.blogspot.com/-K4RvEcoilaI/UGczP8pZwrI/AAAAAAAAFuM/bxbSLe2Sv3E/s1600/MBL.gif

      Excluir
  11. A dica é muito boa, mas o autor deveria prestar a atenção em outro detalhe muito importante em blogs: eliminar os erros de português. Isso tira um pouco a credibilidade.

    Sobre o menu, eu só não uso os templates nativos do blogger porque eles não têm esse menu, então acho que muita gente vai aproveitar esse tutorial.

    Grande abraço.
    Almir Ferreira
    Panorâmica Social

    ResponderExcluir
  12. Eu coloquei bem rapidinho, deu super certo. Obrigado

    ResponderExcluir
  13. Fui tentar colocar o menu mas deu errado e ficou todo desconfigurado, tem algum jeito de reverter e voltar ao padrão.

    ResponderExcluir
  14. Fala Marcus!

    Você acha que este se aplica também aos modelos dinâmicos do blogger? Estou buscando menu dropdown para este tipo de template.

    Obrigado e abraço,

    Rafael

    ResponderExcluir
    Respostas
    1. Olá Rafael! [-( Acredito que não funcione bem, pois a estrutura dos template dinâmicos é muito diferente dos modelos tradicionais da plataforma Blogger.. Mas vale a pena testar em um blog de testes e ver como o menu se comporta. :p

      Excluir
    2. É Marcus, andei pesquisando e parece que não tem como mesmo...tenho um blog de testes e tentei nele....

      Valeu!

      Excluir
  15. Oi, belo post,

    Estou tentando colocar este menu em meu blog mas estou com problemas, o menu esta todo desenhado mas nao sei como faço para linka-los para as paginas respectivas.

    pode me ajudar?

    obrigado

    ResponderExcluir
  16. OBRIGADO!!! DEU CERTO.... AGORA É COLOCAR DO MEU JEITO.. VALEU MESMO.

    ResponderExcluir

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!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo