Como Colocar Submenu no Blogger

Veja um Código para criar um menu com submenu no Blogger. Este é um código simples de HTML e CSS para colocar um sub-menu no seu blogspot de maneira fácil e rápida. Colocar um Submenu no Blogger pode ajudar a organizar melhor seu blog destacando o que você acha mais importante em seu site.

O código do sub menu divide-se em duas partes sugerimos que adicione o código exatamente como está aqui no Dicas para Blogs e faça um teste, depois que ser o submenu funcionando no seu blog faça as alterações necessárias com mais calma.

Colocar Menu e Sub Menu no Blog

Entre no Blogger > Pagina Modelo > Botão Personalizar. (veja aqui: Como Inserir Códigos CSS no Blogger)

codigo CSS sub menu

Depois clique em avançado, vá até o ultimo item da lista de aparece: Adicionar CSS e cole o código abaixo.

/* DROPDOWN MENU BY icanbuildablog.com */
.tabs-inner .widget ul#icbabdrop {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#icbabdrop li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* cor de fundo no menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
background: #555; /* cor de fundo quando o mouse está sobre o titulo */
color: #fff; /* cor da fonte quando o mouse está sobre o titulo  */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
background: transparent;
color: #fff; /* cor do link do menu quando o mouse está sobre o titulo  */
}
.tabs-inner .widget ul#icbabdrop li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
background: #555; /* cor de fundo do submenu */
display: block;
color: #fff; /* cor da fonte do sub-menu */
text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
color:#fff/* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
background: #666; /* cor de fundo dos itens do submenu */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

Clique em aplicar no Blog, depois em voltar para o Blogger.

HTML do Sub Menu

Entre na pagina Layout, clique em adicionar gadget > html/javascript e coloque este outro código.

<ul id="icbabdrop">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
Topics
<ul>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Art and Design</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

Clique para salvar e pronto. Visualize e o sub-menu no blog já está funcionando.

Como Personalizar o Menu do Blogger

Colocar o menu e submenu no blog é fácil, porém personalizar necessita de atenção aos detalhes para não apagar ou adicionar aspas, ponto, qualquer outra letra e símbolo no código por engano, pois isso impede o menu de funcionar corretamente.

Veja aqui:
Porque os códigos não funcionam no blog
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

Adicionar ou Remover Itens do Submenu
No código que colocamos no gadget (html/javascript) temos dois tipos de itens.

<li><a href="#">Home</a></li>

Isto é um item simples do menu, ou seja, aparece o link para uma pagina sem usar submenu. Você só precisa trocar a palavra Home pelo que desejar e o símbolo # pelo link da pagina que desejar.

As linhas com as palavras about, portfolio, contact são idênticas a esta, portanto você altera da mesma forma e claro pode apagar ou adicionar mais caso queira links simples no seu menu.

Este outro código é o submenu por isso ele parece mais complicado, mas não é difícil. A palavra Topics é o que aparece no menu e ao passar o mouse sobre ele aparecem os outros itens na forma de um submenu.

<li>
Topics
<ul>
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Blogging</a></li>
<li><a href="#">Art and Design</a></li>
</ul>
</li>
<li>

Como você pode notar as linhas onde tem as palavras: Lifestyle, Blogging, Art and Design são iguais aos links simples que falamos antes porque na verdade são apenas os links do submenu, ou seja, você deve alterar os textos e links como quiser.

A maior parte dos erros com submenu acontece porque na hora de editar as pessoas apagam algum li ou ul por engano e isso desfaz o menu por completo, por isso não tenha pressa edite apenas os links e adicione outras linhas se precisar tomando cuidado para não colocar ul ou li a mais ou faltando.

Caso queira usar dois submenus basta repetir este trecho de código que mostramos a cima (topics) e editar com outros links.

Modificar a Aparência do SubMenu


Para alterar as cores, tipo e tamanho de fonte, cor de fundo do menu entre novamente na pagina Adicionar CSS que falamos logo no inicio deste tutorial e altere os estilos CSS como desejar. Veja abaixo o que faz alguns deles:
Aparência do menu principal:
tabs-inner .widget ul#icbabdrop li

Quando o mouse está sobre o menu:
tabs-inner .widget ul#icbabdrop li:hover

Links do Submenu:
ul#icbabdrop li ul li a

Existem muitas possibilidades de personalização de menus com CSS, alias são praticamente infinitas as combinações de cores, tamanhos e estilos de fontes, portanto quanto mais você souber de CSS mais poderá modificar o menu. Veja abaixo alguns links sobre CSS:

Códigos CSS para Criar Efeitos no Blog
Alterar cores dos links - CSS
Espaçamento entre Linhas, Letras ou Palavras usando CSS/HTML

Criar um menu com submenu no blog é um trabalho longo, por isso recomendamos que faça pequenas alterações e salve estas modificações sempre que conseguir o resultado que deseja assim em caso de algum erro não perderá tudo que já fez.

Encontramos este código html e css do submenu no blog I Can Build a Blog (em inglês).
Related Posts with Thumbnails

17 comentários:

  1. Bruno
    obrigado pela sugestão e como você pediu não publiquei o comentário

    ResponderExcluir
  2. quero colocar no meu site tenho que adicionar no head

    ResponderExcluir
    Respostas
    1. a parte do CSS é no head junto com outros CSS que já tiver.

      o resto do código (que é o código do menu) dentro do body onde você quer que o menu apareça.

      Excluir
  3. Fabiano, é necessário colocar as media queries para que esse menu se torne responsivo?

    ResponderExcluir
    Respostas
    1. seria possivel tornar o menu responsivo trocando os valores de px para %, mas isso prejudica muito o menu no caso de pagina muito estreita por causa da quantidade de texto.

      acho que seria melhor pesquisar por um código de menu já feito para template responsivo

      Excluir
    2. Fabiano,
      A parte um pouco complicada é que, quando vamos adicionar esses menus personalizados no Blogger, sejam responsivos ou não, os links das páginas estáticas ficam direcionados apenas para a versão PC (Desktop), sendo que fica desconfortável navegar via mobile.

      Acho que a solução mais viável, seria implementar esse menu com as tags móveis nativas do Blogger, método que pode ser feito com a substituição das mesmas... Presumo que seja algo possível.

      Excluir
    3. com o aumento do uso de dispositivos moveis é muito importante testar os códigos no celular também e em alguns casos usar um determinado gadget somente na versão desktop.

      mas você tem razão.. a maioria dos gadgets padrão do blogger funcionam bem em qualquer versão (mobile ou desktop).

      Excluir
  4. Fabiano Roberto, quero te agradecer estava a exatos 2 dias pesquisando como colocar aquela descrição a baixo do Titulo nas postagens, rodei tudo que foi blog do tipo, coisas do Tipo H1/H2..... Tags e etc, nada deu certo, li sua postagem e batata, foi de boa. Meu Blog é o http://seudireitobrasil.blogspot.com.br/ se puder e quiser conferir será uma honra, parabéns e sucesso, sempre que pensar em escrever saiba que estará ajudando muitas pessoas, fora as inúmeras que não voltam pra agradecer, mas, cada cabeça uma sentença, FELIZ 2016.


    ResponderExcluir
    Respostas
    1. obrigado pelos elogios e um feliz ano novo pra você também

      Excluir
  5. Nossaa muito obrigado cara estava a muito tempo procurando respostas mais nao encontrava Deus abençoe grandemente sua vida !

    ResponderExcluir
  6. Belo post amigo, espero que continue postando com qualidade igual sempre vem fazendo obrigado !

    ResponderExcluir
  7. Muito bom Fenando parabéns mesmo, tem ajudado bastante irmão

    ResponderExcluir
  8. Não tenho como agradecer, ajudaste-me e muito com este Post, assim terminei de concluir com a criação do meu menu e submenú, fiz algumas alterações na configuração do mesmo, mas tudo com a tua ajuda. Abraços
    Muito obrigada pelo post e siga ajudando com as tuas experiências. Brevemente aplicarei no meu blog e ver os resultados. Abraço
    https://superabarreiras.blogspot.pt/

    ResponderExcluir
  9. Nunca mais eu deixo de ler esse site! Muito bom.

    ResponderExcluir
  10. ótima ideia! Eu não sabia que isso ajudava tanto.

    ResponderExcluir
  11. bOA NOITE. CRIEI O MENU E SUBMENU, DEU CERTO, MAS AGORA NÃO CONSIGO POSTAR NADA DENTRO DELES. COMO FAÇO?

    ResponderExcluir
    Respostas
    1. o menu tem que editar adicionando ou retirando links da parte final do código aquela que é pra colocar num gadget

      Excluir