MASIGNCLEAN101

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 esse artigo!
Unknown
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

Como faço para mudar as cores do menu?

21 de março de 2013 02:58
avatar

@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

21 de março de 2013 14:30
avatar

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.

21 de março de 2013 22:55
avatar

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

21 de março de 2013 23:03
avatar

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!

22 de março de 2013 03:17
avatar

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?

23 de março de 2013 00:12
avatar

Sim @Cássia! Dá uma olhadinha nesse post:

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

23 de março de 2013 17:52
avatar

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

12 de abril de 2013 09:27
avatar

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

12 de abril de 2013 11:03
avatar

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

24 de abril de 2013 12:12
avatar

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>

24 de abril de 2013 16:54
avatar
Anônimo

AMEII MUITO INTEREÇANTE:)

10 de maio de 2013 13:35
avatar

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

13 de maio de 2013 08:57
avatar

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

13 de maio de 2013 08:58
avatar

Cara falta imagens ajuda aee posta umas pelo menos

13 de maio de 2013 23:40
avatar

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

13 de maio de 2013 23:50
avatar

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

14 de maio de 2013 17:10
avatar

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

16 de maio de 2013 19:49
avatar

Eu coloquei bem rapidinho, deu super certo. Obrigado

28 de maio de 2013 22:42
avatar

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

9 de julho de 2013 12:44
avatar

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

19 de julho de 2013 11:34
avatar

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

22 de julho de 2013 16:30
avatar

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

Valeu!

23 de julho de 2013 09:02
avatar

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

10 de setembro de 2013 13:13
avatar

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

21 de janeiro de 2014 12:56
Seja livre para expor seu pensamento!

Se preferir, antes leia nossa política para comentários...
Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!