25/09/2013

Criar e Colocar um Menu com SubMenu com CSS no Blog

Aprenda a criar e colocar um menu com submenu no blog usando códigos HTML e CSS. Inserir um submenu no blog pode ajudar a organizar seu conteúdo deixando mais fácil as pessoas encontrarem o que procuram. Além disso, esse tipo de menu ajuda você as postagens que acha as mais importantes do seu site.

Como você notará esse é um código grande, mas basicamente ele se divide em duas partes: estilos CSS (aparência do menu) e os links que você quer colocar no menu e sub menu do blog. Então vamos falar sobre esses assuntos separadamente.

Criar e Colocar um Menu com SubMenu com CSS no Blog

Criar e Colocar um Menu com Sub-Menu no Blog


O jeito que colocar esse código que vamos mostrar é muito simples apenas entre na pagina layout > adicionar gadget > html/javascript e cole o código completo.

<style type="text/css">
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;list-style: none;margin: 0;padding: 0;
}
#nav li {
list-style: none;margin: 0;padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*--edite cor do link--*/
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;
margin: 0;padding: 9px 15px 8px;border-right: 1px solid #fff;
}
#nav li a:hover, #nav li a:active {
color: #FFF; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #9F0;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF; /*--cor do link--*/
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform:capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px
solid #FFF;
border-right: 1px solid #FFF;
background-color: #555;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF; /*--cor do link--*/
padding: 7px 10px;
background-color: #FC6;
}
#nav li {float: left;padding: 0;
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
0;padding: 0;
}
#nav li ul a {width: 140px;
}
#nav li ul ul {margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>

Embora seja simples de colocar existem muitas coisas que você precisa personalizar no submenu antes de colocar no seu blog então veja os detalhes abaixo.

Alterar Aparência do Menu do Blog


Será necessário entender um pouco de CSS para editá-lo, mas depois que começar verá que é mais fácil do que parece. Os estilos CSS servem para formatar texto e no caso de criar um menu podemos fazer os botões usando CSS.

Basicamente você deve procurar por background para alterar a cor de fundo do botão do menu e color para mudar a cor do texto do botão. Veja onde estão as configurações mais importantes do sub menu. Veja nos links abaixo algumas dicas úteis sobre como alterar essas cores:
Gerador de Código HTML das Cores
O que é CSS? Para que Serve e Como usar o CSS

Logo no começo do código temos o estilo da barra de menu completa.
#NavbarMenu {
background: #555;
color: #FFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}

Então como falamos altere background: #555; (cor de fundo) e color: #FFF; (cor das letras). Claro que você pode mudar outras coisas como o tipo e tamanho das letras. Além disso, quando mais você souber sobre CSS poderá fazer outros testes para personalizar seu menu. Leia mais dicas sobre:
Código das Cores
Colocar ou alterar as bordas

Cores dos Botões do Sub-Menu


Em varias partes do código você poderá notar a indicação edite a cor do link, portanto só precisa alterar as cores naqueles locais. Veja abaixo uma relação com o nome de alguns dos estilos e o que eles controlam:

#nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.

#nav li a, #nav li a:link, #nav li a:visited - Cores dos botões do sub menu

#nav li a:hover, #nav li a:active - Cores dos botões do submenu quando o mouse está sobre eles.


Colocar ou Alterar os links do Sub-Menu


Vamos usar como exemplo apenas um trecho do código do submenu para explicar como você deve modificá-lo no seu blog.

<li><a href='#'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>


Na primeira linha você deve somente alterar o texto LINK1. Esse é o texto que aparece no menu. Usando como exemplo um blog sobre programação da televisão então escreveríamos filmes no lugar de LINK1.

As outras linhas do código:

<li><a href='url da pagina'>LINK</a></li>
É uma repetição para cada tipo de filme (continuando nosso exemplo), então o código ficaria assim:

<li><a href='url da pagina'>Comédia</a></li>
<li><a href='url da pagina'>Suspense</a></li>

E quantas outras opções você desejar. Lembrando que onde está url da pagina você deve colocar o link para uma pagina do seu blog que fala sobre aquele assunto.

As outras partes deste submenu são apenas repetições deste trecho e você poderá editá-las sempre problemas.

Veja outras dicas úteis para seu blog:
Como Fazer um Menu Vertical Fixo no Blogger
Criar Banner para Blogs: Programas e Sites para Editar Imagens
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript

Para terminar apenas mais uma dica para colocar o menu com submenu no seu blog. Justamente por ser um código com muitas possibilidades de alterações nós recomendamos que coloque o código no seu blog e faça as alterações aos poucos, sempre salvando uma copia do código que funcionou do jeito que você quer, assim se errar algo não perderá muito tempo e trabalho.
Related Posts with Thumbnails

128 comentários:

  1. Olá Fabiano este seu blog sempre tem sido a minha salvação no meu blog!!
    Olha vê se me podes ajudar mais uma vez: queria por na barra lateral do blog uma aplicação que já tenho visto tipo mural onde pomos imagens e ela rola tipo escada....
    sabes o que é?
    podes me ajudar? já tentei com alguns exemplos que vi na net mas não consigo...
    obrigada

    ResponderExcluir
  2. Você pode me ajudar com meu blog?!

    ResponderExcluir
  3. Não tô conseguindo editar o html?!

    ResponderExcluir
  4. mas não consegue entrar na pagina editar html? dá erro na hora de salvar a alteração?... tente explicar melhor.

    exclua seus histórico de internet pode ser erro no carregamento da pagina.

    ResponderExcluir
  5. Eu instalei um novo template, ai eu quero editar o html dele. Exemplo no blog tem o nome "Editar#" ai eu quero trocar esse "Editar#" pelo nome "Filmes Adultos" mais quando pressiono CTRL+F e digito o "Editar#", não aparecer nenhum resultado.

    ResponderExcluir
  6. talvez esse editar esteja dentro de um gadget e não no html do blog. Clique para editar os gadgets de html/javascript que tiver na sua pagina ou o gadget de menu

    ResponderExcluir
  7. Ok. Você pode me ajudar novamente? É por que minhas postagens populares não está mostrando as imagens!

    ResponderExcluir
  8. Lucas nas postagens populares quando dá erro o motivo pode ser o feed do blog configurado errado ou se você usar imagens hospedadas fora do blogger em suas postagens.

    outra coisa é que as miniaturas são somente de imagens se a postagem tiver um vídeo então não aparece a miniatura no gadget postagens populares

    ResponderExcluir
  9. Ola.
    gostaria de saber como consigo retirar a linha que divide os nomes no menu, da barra principal.
    Obrigada.

    ResponderExcluir
  10. procure por border-right: 1px solid #fff; e apague

    veja aqui outras dicas sobre editar botões em CSS: Fazer botão

    ResponderExcluir
  11. Boa tarde.
    Estou tentando colocar o Gadget, tudo ocorre bem ate o procedimento de colagem do código disponibilizado, porém quando vou salvar nada acontece, e quando dou um ENTER, aparece esta mensagem:
    "Invalid widget: HTML1

    Error 400"

    Fico grato caso me ajude!!
    Abraços

    ResponderExcluir
  12. Marcio você deve ter apagado algo por engano no seu html ou seu template tem algum erro, mas não tem nada a ver com esse código.

    normalemente o pior que pode acontecer com um gadget de html/javascript que falamos para usar e o código não funcionar e não aparecer nada no lugar do gadget.

    tente excluir seu histórico de internet pode ser um erro no carregamento da pagina na hora de editar o gadget.

    ResponderExcluir
  13. Estou usando um template que não é do blogger, encontrei em outro site que tinha modelos de template, e peguei para o meu blog. Será quem isso pode estar impedindo de colocar gadget?

    ResponderExcluir
  14. provavelmente esse template tem algum erro que impede que adicione novos gadgets... acho melhor trocar por outro ou pode fazer testes no html até achar o erro (mas pode dar muito trabalho achar o problema)

    ResponderExcluir
  15. Ola Fabiano ..o pouco que já fiz sou muito grato ...a vc ... podes me ajudar como faço para colocar essa opção que tem no seu , (gostou compartilhe ) agradeço.

    ResponderExcluir
  16. José

    neste link tem o código completo:
    Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

    mas se você quiser pode personalizar os botões do addthis que desejar. (funciona também com outros tipos de botões)

    ResponderExcluir
  17. eu consegui !
    muito Obrigada pela você ajudou bastante ;)))
    bjs.

    ResponderExcluir
  18. Eu consegui !
    Muito obrigada pela você ajudou bastante. bjs ;'))

    ResponderExcluir
  19. Eu não estou conseguindo, quando eu coloco o mouse em cima não aparece o submenu embaixo

    ResponderExcluir
  20. Eu não estou conseguindo, quando eu coloco o mouse em cima não aparece o submenu embaixo

    ResponderExcluir
    Respostas
    1. esse código é cheio de detalhes...

      veja se não apagou algum sinal por engano: / " > < ' ....

      Excluir
    2. Tive o mesmo problema, mas encontrei a solução, o problema era com o no Modelo que usei do próprio blogger.
      Como ajeitei? Fui no código do HTML e aonde tem o /* Tabs em algumas linhas dps tinha "overflow: hidden;" ai eu só fiz colocar "overflow: visible;"
      Abraço.

      Excluir
    3. Aconteceu exatamente o mesmo comigo, e fiz o mesmo procedimento que o amigo Buffadão Games, funcionou normalmente.

      Excluir
  21. Olá Fabiano! Tudo bem?
    Quero lhe dizer que este tutorial foi o melhor que já vi até hoje. Fiz algumas alterações no código para colocar apenas dois botões do menu, personalizei e ficou ótimo, só não sei se vou ter problemas por ter mudado algumas partes do código . Gostaria muito que você visse o resultado.
    Um grande abraço,

    Zélia Dantas

    ResponderExcluir
    Respostas
    1. não há problemas em alterar o código. Se ele funcionar é porque você não fez nada de errado.

      apenas tenha cuidado com detalhes como sinais de < >' / e outros para não apagar por engano.

      Excluir
  22. Boa tarde, como adicionar postagens no menu e submenus criados no blog ? não acho a explicação em nenhum lugar. nem no próprio blogger.
    obrigada

    ResponderExcluir
    Respostas
    1. você adiciona as postagens nos links do menu onde aparece

      < a href='url da pagina' >LINK< /a >

      mas tem que fazer manualmente cada link

      Excluir
    2. Olá Fabiano, também gostaria de adicionar post no menu, mas só consegui escrever um post. Como faço pra escrever outros post no mesmo menu, exemplo LOOKS?

      Excluir
  23. Olá Fabiano, tudo bem?
    Não sei o que aconteceu, Qyuando foi reinstalar o código para aumentar as guias, não consigo mais retirar aquela cor verde (hover) e preta do sub-menu. Mesmo alterando pela cor do blog, ela permanece. Já refiz várias, vezes, limpei cache, atualizei e nada. O que será?































    ResponderExcluir
    Respostas
    1. o problema é que está misturando dois códigos de menus.

      o lugar onde adicionou o gadget pega a configuração do menu padrão do blogger por isso está gerando erros por causa do css

      .tabs-inner .widget li a

      e outros similares a esses.

      a questão é que se pagar perderá a formatação padrão do menu do blogger. Minha sugestão é usar somente uma barra de menu

      Excluir
  24. Olá Fabiano vc poderia me ajuda, eu fiz tudo certinho, como diz no tutorial, fiz as configurações mais não aparece os sub menus completo, só aparece 1 os outros são cortados, sabe me dizer o que deu errado, até mesmo o do seu modelo quando colo no meu blog aparece cortado, tipo ele tá lá mais não aparece... =(

    ResponderExcluir
    Respostas
    1. infelizmente esse código é cheio de detalhes, por exemplo na hora de editar os links se faltar ou sobrar algum sinal de " / < > ' ou qualquer outro gera erro.

      outro detalhe importante é não misturar " com ' tem pode usar qualquer um dos dois mas tem que ser todos do mesmo.

      Excluir
    2. Então o código está certinho , eu descobri que se eu colocar ele antes dá pagina de postagem ele fica assim mais se eu colocar ele depois da pagina ele fica certo, você conhece algum jeito de arrumar esse erro?

      Olha meu blog, com ele no inicio e depois da página de postagem...

      http://narllaoliveirafotografia.blogspot.com.br/

      Excluir
    3. o menu no inicio provavelmente gerou conflito com o código padrão do menu do blogger

      o trecho tabs-inner aparece diversas vezes no seu html (CSS) mas não sei dizer se apagar isso resolverá o problema pois o template é personalizado e só fazendo testes até achar o erro.

      minha sugestão é se for editar isso salve uma cópia do html do blog para editar para evitar estragar o template.

      Excluir
    4. também seria possível colocar a mesma configuração de CSS nos trechos tabs-inner, mas como falei anteriormente só é possível saber o resultado fazendo testes.

      Excluir
    5. Mais para eu fazer esses testes eu vou editar o HTML do blog inteiro ou só o que eu fiz do menu?

      Excluir
  25. Bom eu fiz o teste do tabs-inner apaguei todos do html e não funcionou vc poderia me dizer como eu faço pra colocar a mesma configuração de CSS nos trechos tabs-inner ? Desculpe o incomodo, se puder me ajudar serei muito grata, o seu blog foi o único que me ajudou a criar o menu com sub menu

    ResponderExcluir
    Respostas
    1. colocar a mesma configuração é procurar pelo estilo tabs-inner a e colocar nele o mesmo que está em #nav li a.

      mas já que é um template personalizado acho que a melhor opção seria usar um menu comum no inicio do blog sem o submenu para evitar erros porque as vezes você ajusta para um navegador e quando vai testar em outro ficou bem diferente

      Excluir
  26. Fabiano, eu entendi como fazer o menu e o submenu. Mas como alimentá-lo? se escrevo uma postagem, como inserir ela para ir para um menu ou submenu? obrigada, Patricia

    ResponderExcluir
    Respostas
    1. esse menu tem que editar manualmente.

      no código você encontrará diversas vezes o texto: url da pagina e LINK, então deve substitui-los pelos endereços das paginas o nome dos links (texto que aparece no menu)

      Excluir
  27. estou tendo dificuldade de incluir as paginas no submenu, aparece a pagina igual quando estamos configurando, como faço para indicar a url da pagina, ou qual url deve ser incluida

    ResponderExcluir
  28. a url que deve adicionar é o endereço de uma pagina do seu blog

    ResponderExcluir
  29. Olá fabiano eu coloquei o código no meu blog agora eu gostaria de saber como que eu faço para encurtar a tabela ou para acrescentar mais linhas para que não fique feioso assim.De uma olhadinha básica http://loucurasalucinantes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. precisa alterar o código onde aparece a palavra LINK e url da pagina, seguindo o modelo que falamos no post

      Excluir
  30. Olá Fabiano. Pode me informar como adiciono um menu do sub-menu? Obrigada!

    ResponderExcluir
    Respostas
    1. veja na parte do tutorial que fala sobre: Colocar ou Alterar os links do Sub-Menu

      você pode fazer aquilo em qualquer item do submenu

      Excluir
    2. Acho que não me expressei bem, o que quero é que tenha um menu, sub-menu e dentro deste sub-menu ter mais opções, por exemplo: produtos (que seria o menu), roupas (que seria sub-menu) e dentro do sub-menu roupas quero adicionar menus com blusas, saias, etc. Assim, quando se clicar em roupas aparecerão outros menus com os itens. Deu pra entender? Seria um "sub-sub-menu". O template que estou testando é o Galauness, ele já tem menu com sub-menus e eu já aprendi a editá-los, quero saber como criar "sub-sub-menus". Acho que agora expressei melhor o que quero saber. Obrigada!

      Excluir
    3. é possível adaptar esse código mas são muitas mudanças... então veja nos links abaixo outros menus de 3 níveis como você citou:

      http://www.davidchc.com.br/tutoriais/css-tutoriais/sub-menu-com-3-niveis-com-css/

      http://codepen.io/philhoyt/pen/ujHzd

      Excluir
  31. olá eu até que consegui, to ajeitando o menu... mas gostaria que o texto ficasse alinhado no centro do menu ...
    vc pode me ajudar.....???

    obrigadaaaa

    ResponderExcluir
  32. tente adicionar o código text-align:center;

    no trecho:
    #nav li a, #nav li a:link, #nav li a:visited {

    ResponderExcluir
    Respostas
    1. comigo nao funcionou, existe outro modo? obrigada

      Excluir
  33. Bom dia, Fabiano! Eu testei esse tutorial e acontece assim... ao visualizar o blog, o menu fica ''invisivel aos olhos'' e aparece somente a parte na qual eu passar o mouse por cima''... mas eu fiquei muito feliz que acertei de primeira com a estrutura do menu.

    O que pode estar acontecendo? Ainda não alterei nenhuma cor, apenas adicionei os links correspondentes.

    Se vc puder abrir o link da imagem abaixo, pode observar o que descrevo... somente fica visivel a parte do menu que é ''tocada'' pelo mouse

    http://1.bp.blogspot.com/-IRirjcF8ZvA/VLMukVmjVfI/AAAAAAABUmY/-zSr2li_Z10/s1600/cats.jpg

    Agradecida.

    ResponderExcluir
    Respostas
    1. pode ser qualquer detalhe.

      veja se não apagou algum sinal por engano, como por exemplo aspas, barra ou qualquer outra coisa na parte dos links

      Excluir
  34. Existe algum local no código desse tutorial onde eu posso alterar, para que o menu fique um pouco mais ''largo''? É porque ele não alcança o tamanho do banner do meu blog.

    [Pensei na palavra ''width: que está no estilo da barra, mas ali já consta 100%] .

    E uma segunda dúvida... tentei de todas as maneiras encontrar sozinha, mas não consegui....

    Nos botões do menu, quando o cursor passa por cima, ele fica na cor verde.

    Gostaria de trocar essa cor.

    Tentei a linda:

    #nav li a:hover, #nav li a:active - cor do menu quando abre o sub menu.

    mas o que sofre a mudança são as letras, e não o fundo da cor do botão.

    Eu agradeço muito se puder me dar mais essa orientação, fiz todo o possivel para descobrir sozinha, mas não tive sucesso.

    Obrigada.

    ResponderExcluir
  35. nesta mesma linha #nav li a:hover, #nav li a:active

    você pode adicionar color:#000; com a cor que desejar.


    sobre o tamanho total do menu, veja aqui:
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    width: 150px;

    este 150 é a largura de cada botão, então altere até ajustar o tamanho total do menu. Acho que essa é uma das maneiras mais simples de fazer.

    ResponderExcluir
  36. Valeuuuuuuuu.. a tempos tento colocar um menu com submenu, em linha horizontal, só tinha conseguido na vertical. Obrigada, fiz e deu certo, agora só me falta colocar as categorias... Pois tudo é meio complicado pra mim.. mas aos poucos vou conseguindo. Ainda bem q tem pessoas como vc q se dispõe a postar dicas! :) DEUS TE ABENÇOE!

    ResponderExcluir
  37. Sua dica foi excelente, há muito tempo eu venho procurando um bom menu drop down, e enfim achei

    ResponderExcluir
  38. Olá Fabiano. O menu é genial. Porém estou com o mesmo problema de uma amiga, que comentou a postagem há bastante tempo. Quando está abaixo da header, os submenus ficam cortados, apenas algumas opções aparecem. Em outros locais eles abrem normalmente, mas, eu preciso dele abaixo da header.
    Eu acredito que seja algum impedimento de que os submenus se expando por cima da área de postagem,
    Adicionei várias tags
    ao final do código, e cria-se um grande espaço vazio abaixo do menu. Dessa forma, os submenus abrem normalmente, mas aquele espaço compromete muito a estética.
    Poderia me ajudar?
    Obrigado.

    ResponderExcluir
  39. se o menu funciona diferente abaixo da header deve ser porque tem algum estilo CSS interferindo (configurado de outra forma no estilo header), infelizmente o blogger tem alguns códigos CSS que não aparecem no template mas são carregados automaticamente.

    infelizmente nestes casos é bem difícil corrigir e não funciona em todos os navegadores

    qual o endereço do blog que está com esse problema?

    ResponderExcluir
  40. Ola Caro Dono do Site kkk...
    Seu site sempre me salva diariamente, so que hoje estou com um problema nesse seu Menu, Coloquei ele perfeitamente igual no tutorial, soque ele está fikando em cima do "Browse" do meu blog, como faço pra chegar ele um pouco pra direita?

    ResponderExcluir
    Respostas
    1. esse código é normal o submenu aparecer abaixo do link.

      tente procurar um código de submenu que já apareça ao lado senão precisará fazer muitos ajustes....

      infelizmente não tenho um código pronto para lhe mostrar.

      Excluir
  41. Respostas
    1. no código tem font-family: .....

      isso aparece no começo que é o estilo de fonte do menu completo e depois no meio que é o menu que aparece.

      veja aqui:Como Formatar o Texto do Blog

      Excluir
  42. Olá Fabiano. Como faço para que os items do submenu fiquem de 2 em 2 e lado a lado? Obrigada! Exemplo: (Menu principal) PRODUTOS
    (Submenu) Produto 1 Produto 3 Produto 5
    Produto 2 Produto 4 Produto 6 (assim por diante)

    ResponderExcluir
  43. neste exemplo que citou você criou apenas um item no menu (produtos) e colocou todos os outros no submenu.

    se quiser separado terá que criar 2 ou mais itens no menu e depois colocar o submenu em cada um deles.

    como fizemos no tutorial usando a palavra link1, link2 ....

    ResponderExcluir
    Respostas
    1. Olá Fabiano, eu coloquei espaços entre os submenus do exemplo para que ficassem como quero fazer, mas a msg aqui ao ser publicada não assumiu os espaços, então vou te passar o link de um site que tem o menu e submenu que quero fazer: http://www.lelis.com.br/shoponline/. O menu principal tem 1 submenu com itens de 2 em 2 (um embaixo do outro) e ficam lado a lado. Obrigada.

      Excluir
    2. seu template é muito modificado por isso as vezes é difícil adicionar códigos.

      para corrigir espaço no menu teria que alterar o CSS dos links e talvez outras coisas o que poderia prejudicar o template.

      Excluir
    3. Vou continuar pesquisando então. De qualquer forma, obrigada por responder.

      Excluir
  44. Boa noite irmão. Primeiramente parabéns pelo trabalho. O menu funcionou perfeitamente. Uma pergunta: Como faço para acrescentar um segundo submenu. Tipo: Coloquei o mouse sobre o menu, ele abre o submenu e qnd colocar o ponteiro sobre ele abre outro. Acho que deu pra explicar. rsrsrsrssr
    Abraços

    ResponderExcluir
    Respostas
    1. entendi sua pergunta, mas não tenho código pronto para colocar 2 níveis de submenu.

      tem que alterar vários trechos do código então é mais fácil procurar um código pronto

      Excluir
  45. Bom dia Fabiano!
    Parabéns pelo site. estou tentando criar um submenu. copei o html disponibilizado e colei no html/javascript do blogger. o menu aparece perfeitamente e muito bonito, mas os subnenus não aprecem. onde estou errando?
    desde já agradeço pela atenção
    Francisco

    ResponderExcluir
    Respostas
    1. entrei no seu blog agora e notei que faltou alterar o link no submenu, por exemplo:

      < li >< a href="#" > Alan Camargo< /a >< /li >

      no lugar deste sinal de #, você deve colocar o endereço da pagina que seja abrir para esse link, por exemplo:

      < li >< a href="http://nespefe.blogspot.com.br/2015/06/texto-dia-2506.html" > Alan Camargo< /a >< /li >

      Excluir
  46. Cara!! Parabéns pelos seus poster!! Estava precisando criar um blog com cara de email... Não conseguia colocar submenus (subpáginas) você salvou a pátria!!

    ResponderExcluir
  47. oi
    os submenus esta funcionando porem do quarto submenu em diante não aparece mais.

    pode me explicar o porque?

    ResponderExcluir
    Respostas
    1. provavelmente na hora de editar o código, adicionar mais itens você apagou algo por engano.

      este código de submenu tem muitos detalhes e códigos parecidos li ul infinitas vezes e se trocar ou colocar a mais pode fazer o menu dar erro

      Excluir
  48. este código tem muitos detalhes por isso as vezes dá erro.

    por exemplo, quando vai colocar os links do seu blog, alterar algo no estilo CSS, adicionar ou retirar itens no menu. Qualquer letra ou sinal faltando ou sobrando pode fazer o código dar errado.


    já vi outros códigos de submenu mas não todos parecidos com este.

    ResponderExcluir
  49. Bom dia Fabiano,

    Há alguns anos utilizo bem satisfatoriamente o sub menu que você publicou em 2009 (http://www.dicasparablogs.com.br/2009/05/como-colocar-submenu-no-blog.html). Infelizmente parou de funcionar há algumas semanas.

    Estou batalhando com este novo que você postou mas a configuração me parece bem mais complicada. (http://www.sistemaronin.com/)

    Ex:

    1- A barra de menu fica transparente.

    2- A largura de cada ítem não está padronizada.

    3- Faltam as bordas superiores e inferiores.

    No fim, até preferia ficar com o cód. antigo. Notei que nem o exemplo disponibilizado funciona mais.

    Obrigado pelo apoio!

    ResponderExcluir
  50. vou testar alguns códigos e publicar um novo tutorial sobre o assunto...

    o mesmo vale para o outro comentário na postagem:
    Como Colocar Submenu no Blog

    ResponderExcluir
  51. Olá Fabiano,

    Suei bastante e consegui avanços nos ajustes que queria, entretanto resta um:

    - Algumas palavras ítens (as maiores) precisam ficar mais centralizadas. Parece que já começam com alguma espécie de margem a esq. Poderia me informar onde está esse ajuste?

    Muito obrigado!

    ResponderExcluir
    Respostas
    1. no código tem:

      padding: 9px 15px 8px;

      isso são margens e aparecem varias vezes no código. Se você quiser tente trocar todos por esse aqui:

      padding: 1px 2px 3px 4px;

      veja qual lado cada numero controla:

      1 - em cima
      2 - lado direito
      3 - em baixo
      4 - lado esquerdo

      e claro ajuste cada valor como desejar

      Excluir
    2. como já falei este trecho aparece varias vezes no código (ele controla o link e quando o mouse está sobre o link) então quando substituir use valores iguais como está no código senão o menu vai ficar "dando um pulo" ao passar a o mouse, por exemplo se deixar 20 px de margem esquerda tem que ser em todos os lugares que este código aparece.

      Excluir
    3. não publiquei seu outro comentário porque você colocou seu email nele.


      tente colocar o código text-align:left; dentro da primeira linha do css
      #NavbarMenu {..

      as vezes seu blog já tem outros CSS configurando links e isso atrapalha um pouco

      Excluir
    4. Olá Fabiano,

      Refiz todo o processo, revendo cód. por cód. e deu mais certo agora.

      Os dois ajustes de padding que você colocou já eram suficientes.

      O "problema" agora são as margens. No post de 2009 ficavam iguais, e agora ficam mais grossas porque se encontram a esq. de uma e dir. de outra.

      Muito obrigado pela atenção!

      Excluir
    5. que bom que deu certo...

      estou terminado de testar um outro código e vou publicar logo, mas é bom saber que você resolveu o problema

      Excluir
  52. Oi Fabiano, Muito bacana seu blog, tô aprendendo muito com ele, mas preciso de uma ajuda!
    Não consigo centralizar o menu de jeito nenhum.
    Li com calma todos os comentários, e nada.
    Pode me ajudar?

    ResponderExcluir
    Respostas
    1. logo no começo do código tem

      #NavbarMenu {
      background: #555;
      color: #FFF;
      font-size: 12px;
      font-family: Arial, Tahoma, Verdana;
      width: 100%;height: 35px;
      font-weight: bold;margin: 0;

      tente trocar esse margin: 0 por margin:auto;text-align:center;


      aqui tem um novo tutorial sobre:
      Como Colocar Submenu no Blogger

      talvez ache este mais fácil

      Excluir
    2. Isso foi a primeira coisa que tentei e nada!
      Já coloquei largura pra ver se resolvia, nada!
      Já fiz mil alterações no código e nada!!

      Já me estressei e desisto!!

      Excluir
    3. Oi Fabiano, meu blog ainda não está no ar, mas já alterei de todas as formas que sabia o código, e a planilha insiste em ficar à esquerda. Já usei margin:auto, margin:0 auto, já coloquei tamanho, eu preciso que ela fique ao centro da página, mas caso ela precise de uma largura específica, essa seria de 1.100px, porque tô com problema, o menu do blogger, não me permite abrir um link externo em uma nova aba, o que pra mim é super ruim, por isso queria substituir o menu do blogger por esse, não sei se existe algum erro no código ou algo que trava essa edição.

      #NavbarMenu {
      background: #FFF;
      color: #000000;
      font-size: 14px;
      font-family: Open Sans
      width: 100%;height: 35px;
      font-weight: bold;margin: 0;padding: 0;
      }
      #NavbarMenuleft {
      width: 100%;float: center;margin: 0;padding: 0;
      }
      #nav {
      margin: 0;
      padding: 0;
      }
      #nav ul {
      float: center;list-style: none;margin: 0;padding: 0;
      }
      #nav li {
      list-style: none;margin: 0;padding: 0;
      }
      #nav li a, #nav li a:link, #nav li a:visited {
      color: #000000; /*--edite cor do link--*/
      display: block;
      font-size: 14px;
      font-family: Open Sans;font-weight: normal;text-transform: capitalize;
      margin: 0;padding: 9px 15px 8px;border-right: 0px solid #FFF;
      }
      #nav li a:hover, #nav li a:active {
      color: #000000; /*--edite cor do link hover--*/
      margin: 0;
      padding: 9px 15px 8px;
      text-decoration: none;
      background-color: #FFF;
      }
      #nav li li a, #nav li li a:link, #nav li li a:visited {
      width: 150px;
      color: #000000; /*--cor do link--*/
      font-size: 14px;
      font-family: Open Sans;
      font-weight: normal;
      text-transform:capitalize;
      float: none;
      margin: 0;
      padding: 7px 10px;
      border-bottom: 0px solid #FFF;
      border-left: 0px
      solid #FFF;
      border-right: 0px solid #FFF;
      background-color: #FFF;
      }
      #nav li li a:hover, #nav li li a:active {
      color: #000000; /*--cor do link--*/
      padding: 7px 10px;
      background-color: #FFF;
      }
      #nav li {float: left;padding: 0;
      }
      #nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin:
      0;padding: 0;
      }
      #nav li ul a {width: 140px;
      }
      #nav li ul ul {margin: -32px 0 0 171px;}
      #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
      left: -999em;}
      #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover
      ul, #nav li li li.sfhover ul {left: auto;}
      #nav li:hover, #nav li.sfhover {position: static;}
      [...]

      Excluir
    4. achar o código sem testar online é bem difícil.

      sugiro que apronte tudo para colocar o blog online e depois que estiver use o inspecionar elementos para testar e achar o erro.

      pode ser algum padding ou margin com 0 px que não deixa centralizar, além de varios outros códigos css do blogger.

      na pagina layout ao arrastar o gadget você perceberá que existem duas linhas para colocar gadgets no topo da pagina ocupando a largura total do blog, teste trocar o gadget de lugar. (caso o seu template seja deste tipo).

      o blog não precisa estar perfeito para você colocar online. Acredite mesmo de pois de anos com seu blog você achará coisas nele que precisa corrigir ou melhorar.

      Excluir
    5. Oi Fabiano!!
      Então, não consegui deixar esse menu ao centro no topo da página, então optei pelo menu do blogger, já mudei o menu de lugar também, mas não resolveu, mas se você notar no rodapé do blog, lá no final, usei esse menu que você passou com uma barra de pesquisa, e pra mim ficou ótimo no rodapé.

      Que pena que não consegui centralizá-lo, mas se quiser, dá uma olhada no blog, entrou no ar hoje! www.costurandonuvens.com.br

      Outra coisa que não consegui fazer, foi colocar cor no fundo do menu, e fazê-lo ter o mesmo comprimento do header, testei com ambos os menus e não consegui, ficou um espaço entre o menu e o header.
      Quando não era uma coisa, era outra, mas tá bom, o que importa é o conteúdo do blog, e esses pequenos desafios vou resolvendo com o tempo.

      Pra quem não mexia no blogger há mais de 10 anos, até que meu blog não ficou ruim kkkk

      Muito obrigado pela paciência em me ajudar!!!
      Tenho aprendido muito com seu blog!!

      Beijão!!

      Excluir
    6. antes de responder quero comentar sobre as imagens que você postou no blog. Elas estão no formato .png que é muito pesado, faça um teste salvando uma delas no formato .jpg

      você verá que não perde qualidade e a imagem fica mais leve e o blog carrega mais rápido.


      sobre o seu menu procuro no html o trecho de CSS

      .tabs-inner .widget ul {

      margin-top: 0;
      margin-left: -30px;
      margin-right: -30px;
      }


      apague as linhas

      background: transparent none repeat-x scroll 0 -800px;
      _background-image: none;
      border-bottom: 1px solid transparent;


      e coloque
      background-color: #ccc;

      depois nas linhas
      margin-left: -30px;
      margin-right: -30px;

      altere estes valor de margem para 10px (numero positivo e não negativo como está no seu blog)

      então faça os ajustes de largura e cor de fundo do menu, mas eu achei que ficou muito bom do jeito que está.

      Excluir
  53. Olá! Primeiramente quero parabenizar pelo blog, é muito explicativo, bem feito, bem organizado! Me ajudou muito!
    Por favor, estou quebrando a cabeça. Passei a usar o Blogger, e tenho noções bem básicas de HTML(básico do básico). Instalei um template personalizado, com um submenu. Fiz as alterações no menu e no sub menu. Agora minha pergunta, como faço para postar e deixar meus posts as paginas que quero?
    Detalhe : no menu do Blogger, em opções : Páginas, as paginas estão desmarcadas, mas no blog está tudo ok, as paginas estao aparecendo normalmente com os menus.
    Quando edito no HTML, consegui colocar um link de um post em uma das paginas, mas e os demais posts? o que vou fazer?
    Se houvesse uma opção de classificar um menu quando postar, seria mais facil :/
    Ah, acabei de lembrar, na area de layout>Paginas>Editar ,todo mundo fala que é só clicar em "Lista de links – mover o gadget para a coluna lateral" e posso editar o submenu, sendo que nem é um link, nao tem como clicar. Nossa.. minha cabeça esta muito confusa, por favor me ajude.
    Não sei se expliquei bem, porque só pela situação ja embaralhou minha cabeça, mas da pra ter uma idéia pelo meu blog : http://beckyspy.blogspot.com.br/ Aparentemente esta ok, mas nao consigo colocar os posts dentro das páginas, apenas 1 post, mas vou precisar postar mais futuramente...

    O código de um submenu por exemplo esta assim : < l i>< a class ='drop-ctg' h ref='# '>Beleza< / a >
    < u l >
    < li> < a href=' # '>Maquiagem < / li>
    < li>< a href =' http ://beckyspy.blogspot.com.br/2015/11/cabelo- colorido. html ' > Cabelo < / li>

    < / li>

    Att,

    Rebeca

    ResponderExcluir
    Respostas
    1. este tipo de menu é para colocar apenas um post em cada pagina ou item do menu.

      o menu é feito manualmente então toda vez que quiser trocar um item do menu precisará editar o html dele. Não tem como fazer de forma automática


      como você mesma falou já está cansada de mexer neste menu. Então se está funcionando sugiro que esqueça disso por uns dias e depois verá que está mais fácil fazer as alterações que deseja.

      Excluir
    2. Poxa que pena, queria tanto fazer um sub menu para que pudesse deixar mais organizado meus posts...
      Vou dar uma olhada depois então, isso me deixou muito cansada :(
      Muito obrigada!
      Mais uma vez parabéns! :)

      Excluir
    3. o menu vai organizar alguns posts ou pagina do blog que você queira destacar, mas este tipo de menu não é para posts recentes (senão terá que atualizar sempre).

      Excluir
  54. olá, eu coloquei o codigo no meu, mais quando eu adiciono o link, ele aparece invisivel, e só aparece quando passa o mouse por cima, algueem tem noção do que seja?

    ResponderExcluir
    Respostas
    1. as cores de fundo do menu não são iguais do seu blog?

      ou então pode ser algum detalhe do código errado, infelizmente é difícil de achar pode ser um sinal apagado por engano, misturar os sinais ' e " nos links

      Excluir
  55. Olá como faço para criar um terceiros nivel de menu nesse script que você postou?

    ResponderExcluir
    Respostas
    1. você teria que adicionar mais um nível no css e no html, talvez seja mais fácil achar um código pronto de 3 níveis.

      são varias alterações no código e não tenho como fazer e testar no momento

      Excluir
    2. Fabiano aonde eu insiro um comando para que esse MENU fique compativel com os tablets? Ele funciona perfeitamente em smartphones mas no tablet só aparece o menu principal. Os submenus não!

      Excluir
    3. não testei este código em tablet, então se está funcionando no computador e não no tablet talvez não seja possível usar este tipo de submenu.

      infelizmente não tenho os códigos para tablet

      Excluir
  56. EU ADICIONO ELE NO MEU BLOG E ELE NÃO APARECE

    ResponderExcluir
  57. Cara, tu salvou minha vida!kkkkkkkk...
    Ameii o resultado!

    ResponderExcluir
  58. Legal cara, obrigado mesmo por disponibilizar esse menu, a tempos procurava um assim, muito bacana, é simples e prático.
    Sucesso pra você!!!

    ResponderExcluir
  59. PODES ME AJUDAR COM ADICIONAR LINKS NO MEU BLOG?

    ResponderExcluir
  60. que tipo de link quer adicionar? no menu?

    ResponderExcluir
  61. os sub menus nao estao funcionando oq eu preciso fazer??

    ResponderExcluir
  62. estes códigos tem muitos detalhes.. tem que verificar se não apagou nenhum sinal por engano na hora de editar os links do menu..

    se quiser veja aqui outro código para submenu
    http://www.dicasparablogs.com.br/2015/10/como-colocar-submenu-no-blogger.html

    ResponderExcluir
  63. Boa tarde! Usei o código e funcionou perfeitamente. Gostaria de saber se você tem algum tutorial para eu usar esse mesmo menu fixo no topo da página, mesmo quando estou rolando a página. Obrigada!

    ResponderExcluir


  64. tente esse código:
    position: fixed;
    right: 0;
    top: 50%;

    adicione no começo do CSS, aqui:

    #NavbarMenu {
    position: fixed;
    left: 0;
    top: 0;
    ........ e todo resto do código como está no tutorial.


    isso deve fixar no topo da pagina.

    ResponderExcluir
  65. oi gostei muito desse post e de outros que já li gostaria de perguntar como criar uma galeria de fotos em slide no blog?

    ResponderExcluir
    Respostas
    1. tem um gadget de slides padrão no blogger, mas as imagens são pequenas.

      senão gostar veja aqui:

      http://www.dicasparablogs.com.br/2013/09/colocar-slide-blogger-slides-postagens-recentes.html

      Excluir
  66. Bom Dia! eu só não estou conseguindo mudar a cor das letras, ponho os códigos e nada, será que to fazendo algum procedimento errado? estou colocando como html.

    ResponderExcluir
    Respostas
    1. a cor e fontes tem a explicação no tutorial, por exemplo:

      #nav li a:hover, #nav li a:active é quando o mouse está sobre o menu


      a linha:
      #nav li a, #nav li a:link, #nav li a:visited é a aparência normal do menu quando o mouse não está sobre ele

      então precisa trocar o nome, cores ou tamanho das fontes nestes trecho do codigo

      Excluir
    2. Obrigado pela atenção Fabiano, eu fiz umas edições aqui e conseguir. Muito Obrigado.

      Excluir
  67. Olá! Seu blog é um dos que têm me ajudado a personalizar meu blog. Eu coloquei há tempos um menu fixo no topo da página. Como é possível colocar submenus com ele já no topo? Por gentileza explique de modo simples pq sou básica.rsrs Muito grata.

    ResponderExcluir
    Respostas
    1. se já tem um menu e quer colocar um submenu o melhor a fazer é trocar o código. Apagar o menu e colocar o submenu no lugar.

      adaptar um código em cima de outro dá muito mais trabalho do que apagar um e colocar outro código.

      claro que se for fazer a troca sugiro que salve os códigos do menu que está usando agora, assim se não gostar do resultado depois da mudança poderá voltar ao seu menu atual com mais facilidade.

      Excluir