8 de fevereiro de 2013

59

Menu Horizontal com Css e Submenu para Blog (Blogspot)



E aí pessoal, vamos aqui com mais um tutorial!
Desta vez vou atender o pedido do Gustavo Maciel, ele perguntou como colocar um Menu Horizontal no Blog igual ao que temos em nosso Blog.

Como você vê na imagem abaixo, este é um "Menu com Submenu" que fica na Horizontal posicionado abaixo do cabeçalho do blog, ele é bastante eficaz para organizar as páginas do Blogger.

Menu e Submenu horizontal para Blogger

Como colocar Menu com Submenu Horizontal no Blog  

Então pessoal vamos ao trabalho, e seguir os passos.
1° Passo: Acesse o painel de edição do seu blog.

2° Passo: Agora vamos editar o HTML do seu blog, então vá na opção "Modelo" >> depois em "Editar HTML" e clique em Prosseguir:
3° Passo: Agora procure por esse Tag no HTML:
]]></b:skin>
E para facilitar a sua busca pelo o Tag, utilize as teclas de Pesquisa (Ctrl+F) do seu Teclado.

4° Passo: Apos encontrar o Tag, acrescente esse CSS  logo acima dele:

/*-------Menu Horizontal---*/
#nav {
        background: #045F98 url(http://2.bp.blogspot.com/-SLr9L9sm-AY/UNs9BubxCcI/AAAAAAAADNo/BzWlbK-7fzI/s1600/tttttttt.png) repeat-x bottom;
width:940px;
font: bold 14px "ms sans serif", verdana, arial;
color: #a79578;
margin: 0 auto 0px;
padding: 0px auto 0px;
        height:55px;
}
#navleft {
width: 700px;
float: left;
margin: 0;
padding: 0;
}
#navright {
width: 250px;
font-size: 11px;
float: right;
margin:0px;
padding:0px;
}
#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 {
        background: #045F98;
color: #fff;
display: block;
font-weight: bold;
text-transform: none;
padding: 15px 10px 17px 10px;
       margin: 0 5px 0 0;

}
#nav li a:hover, #nav li a:active {
        background:#045F98;
        color:#fff;
padding: 15px 10px 17px 10px;
       margin: 0 5px 0 0;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #045F98;
width: 150px;
color: #FFF;
        font: normal 14px "ms sans serif", verdana, arial;
text-transform: none;
float: none;
margin: 0;
padding:13px 10px;
        border-bottom:1px dotted  #363636;
        border-right:1px solid #363636;
        border-left:1px solid #363636;
}
#nav li li a:hover, #nav li li a:active {
background:   #363636;
color: #FFF;
padding:13px 10px;
}
#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;
}


5° Passo: E depois de acrescentar o Css, vamos colocar o Script do menu no cabeçalho do Blog. Então você vai procurar por esse outro Tag:
</header>
6° Passo: Quando encontrar o Tag "</header>" coloque esse código logo abaixo dele:

<div id='nav'>
<div id='navleft'>
      <ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>TITULO</a>
<ul>
<li><a href='ENDEREÇO DA PAGINA 1'>TITULO1</a></li>
<li><a href='ENDEREÇO DA PAGINA 2'>TITULO2</a></li>
<li><a href='ENDEREÇO DA PAGINA 3'>TITULO3</a></li>
</ul>
</li>
<li><a href='#'>TITULO</a>
<ul>
<li><a href='ENDEREÇO DA PAGINA 1'>TITULO1</a></li>
<li><a href='ENDEREÇO DA PAGINA 2'>TITULO2</a></li>
<li><a href='ENDEREÇO DA PAGINA 3'>TITULO3</a></li>

</ul>
</li>
<li><a href='ENDEREÇO DA PAGINA'>TITULO</a></li>
<li><a href='ENDEREÇO DA PAGINA'>TITULO</a></li>
</ul>
</div>
   </div>


Edite o Código
Pronto pessoal, esse segundo código é o lugar onde vocês vão editar o titulo dos menus e submenus, e alterar  o endereço de cada determinada pagina.
Observe que no código eu deixei todo bem explicado e destacado em cores.
  • Em cor Azul você vai substituir pelo endereço da determinada pagina.
  • Em cor Vermelha você vai dar um titulo para os menus.
E por fim você visualiza pra ver se esta tudo certo, e depois salve o modelo.

Mudar a cor do menu:
Uma outra questão que vou explicar também é, se caso você queira mudar a cor do menu, pois o menu esta em cor azul, então para mudar a cor do menu é bem simples:

Veja que no primeiro código CSS eu destaquei duas partes em (Azul e Vermelho).
  • Então! A parte que esta destacada em cor Azul " #045F98" você vai substituir por uma cor que você queira colocar no menu, se você quiser escolher uma cor clique Aqui.

  • A parte que destaquei em cor vermelha: "http://2.bp.blogspot.com/-SLr9L9sm-AY/UNs9BubxCcI/AAAAAAAADNo/BzWlbK-7fzI/s1600/tttttttt.png" se trata do link de uma imagem, ou seja, neste caso você terá que criar uma imagem com a cor que deseja colocar no menu, entretanto a imagem terá que estar com o mesmo tamanho dessa imagem:
Baixe essa imagem
Então você baixa essa imagem pra o seu computador e edita com a cor desejada, e em seguida hospede a imagem e substitua o endereço que esta no código pelo endereço da sua imagem:
http://2.bp.blogspot.com/-SLr9L9sm-AY/UNs9BubxCcI/AAAAAAAADNo/BzWlbK-7fzI/s1600/tttttttt.png".

E pronto pessoal, agora só Salvar o modelo e aproveitar o blog.








59 comentários:

  1. Oii, gostei muito do tutorial!
    Só gostaria de saber: Como eu mudo a cor do texto do menu??

    ResponderExcluir
    Respostas
    1. Acho que deve ser lá depois do nome background, onde tem um código das cores que está em azul, para isso vai ter de editar o código html que você colou. Vai no photoshop lá tem os códigos de todas as cores existentes, daí é só substituir. Ou entra no próprio link que o cara disponibiliza aí em cima http://variasdicasparablogs.blogspot.com.br/2012/10/gerador-de-cores-css.html Boa sorte!

      Excluir
  2. ola gostaria de saber como faço para editar o quem sou do meu blog ja procurei e não acho me ajuda ..

    ResponderExcluir
    Respostas
    1. Oi gata. É só você entrar no site do blogger, fazer login. Em visão geral do blog, na parte superior esquerda vai ter um botão com o nome "visualizar blog", daí você clica, entra no blog como administradora e vai lá onde tem "quem sou". Do lado direito dessa frase deve ter o desenho de uma ferramenta, daí é só clicar e editar o que você quiser. Mas isso só vai funcionar se tiver feito login antes de tudo valew

      Excluir
  3. Respostas
    1. todo blogger tem a teg só se vc mudou o template

      Excluir
    2. O meu também não, e meu layout é modificado, feito por encomenda.

      Excluir
  4. Edu me ajuda!!!!!
    Já tenho o menu proto mas não consigo colocar as postagens nele. Sempre que crio uma postagem só aparece na pagina inicial. Me explica no passo-a-passo por favor!!!!!

    ResponderExcluir
    Respostas
    1. È Simples; voce tem que criar marcadores e os seus menus tem que ter o link para redirecionamento com o mesmo link que vc criar com os marcadores.

      Qualquer coisa Visita o meu blog: http://atualidadenota10.blogspot.com.br/
      ou minha fãn page no facebook: https://www.facebook.com/atualidadenota10

      Excluir
  5. valeu mesmo.mano finalmente consegui depois de dias e dias graças a você,valeu mesmo,os seu blog é melhor!!!!!!

    ResponderExcluir
  6. Este comentário foi removido pelo autor.

    ResponderExcluir
  7. Olá,
    Eu estou procurando pelo tag " ]]> " mas não encontra nada, já mudei o modelo mas mesmo assim, nada é encontrado. Alguem pode me ajudar ai. Se possível valew.

    ResponderExcluir
    Respostas
    1. A tag não esta aparecendo completa ai mas é a que o autor desse artigo informa.

      Excluir
  8. e Para colocar um sub menu do sub menu como faço

    ResponderExcluir
    Respostas
    1. olá Adailton!
      Esse menu Horizontal já possui (Menu e Sub-menu), na demonstração da imagem mostra como é um Sub-menu...
      Obrigado

      Excluir
  9. E pra colocar as coisas dentro do menu?

    ResponderExcluir
    Respostas
    1. Olá!
      Na parte do segundo código tem várias partes que destaquei em cor Azul (ENDEREÇO DA PAGINA) lá você deverá substituir o texto pelo endereço da página que quer adicionar no menu, no tutorial mostra o local onde adicionamos o endereço.
      espero ter ajudado. Obrigado!

      Excluir
  10. Você é um excelente professor. Seu blog é extremamente útil principalmente aos que como eu, recém estão começando a se aventurar nesse complexo mundo de códigos de programação web. Só posso lhe dizer parabéns e obrigado!

    ResponderExcluir
  11. Qeria saber como mudar a fonte as letras.

    ResponderExcluir
    Respostas
    1. também gostaria de saber onde muda a fonte. Já troquei os nomes onde aparece "ms sans serif", verdana e arial, pelas que eu quero mas não modificou nada...
      A propósito, muito esclarecedor seu post, já estou a dias tentando colocar um menu no meu blog e ainda não tinha conseguido.
      Fiz algumas modificações no Css e olha só como ficou o meu: http://blogjuliafelix.blogspot.com.br/

      Só não consigo mudar a fonte... :\

      Excluir
    2. Júlia, vê se te ajuda...


      Kelven pedro26 de fevereiro de 2014 15:32
      Olá Ana Paula!..
      Para alterar a fonte do Menu é fácil, só seguir essas instruções:
      >> 1º passo: você tem que pesquisar no Google: "Fontes em CSS" ou "Tipos de Letra em CSS". No resultado da busca, você encontrará vários sites que disponibilizam as fontes em CSS, então é só "escolhe" um tipo de letra que você acha legal e "copiar".

      >> 2º passo: no código CSS do Menu, existe dois trechos que representa a fonte da letra, o primeiro é este aqui:
      font: bold 14px "ms sans serif", verdana, arial;
      o segundo trecho é este aqui:
      font: normal 14px "ms sans serif", verdana, arial;

      Então, você vai substituir esta parte :
      "ms sans serif", verdana, arial
      pelo CSS da letra que você deseja colocar no Menu, substitua nos dois trechos sitado.
      depois é só visualizar Modelo, e se estever tudo certinho, salve o modelo...
      Espero ter ajudado, fico grato por ter comentado, Obrigado!

      Responder

      Excluir
  12. Cara, amei, não é atoa que diariamente visito este site/blog de ajuda, não sou forte no assunto, mais graças a você(s) eu to aprendendo mais é mais, obrigado mesmo!

    ResponderExcluir
  13. Help... eu já inseri outro còdigo de css antes de ]]> referente a um slide q coloquei no meu blog... posso colocar este novo CSS para fazer o submenu? obrigadaaaaa!!!

    ResponderExcluir
    Respostas
    1. Olá!
      Sim, antes da Tag: ]]> você pode adicionar vários códigos CSS, quanto ao menu ou Slide você pode inserir mais CSS sem nem um problema.

      OBS: Mas sempre com atenção na hora de adicionar códigos ao seu template, sempre é recomendável o mesmo manter uma cópia, caso houver erro na edição através da cópia você poder recuperar seu template

      Excluir
  14. Conseguir mano, vai ajudar muito o pessoal aqui da minha turma ! Agradeço !
    Se quiser dar uma olhada lá http://www.portalfisionutri.blogspot.com.br/

    ResponderExcluir
  15. NAO CONSEGUI O MEU E BAIXADO DA NET E NAO TEM O CODIGO

    ResponderExcluir
    Respostas
    1. http://erikasarti.net/html/tabela-cores-seguras-web-safe/

      Excluir
  16. Respostas
    1. Olá Cláudia!
      No primeiro código, tem uma parte com o seguinte valor: "width:940px;" esta: representa a largura do menu, então, você vai "Alterar" o valor de acordo com a largura do seu Layout.
      Obrigado!

      Excluir
  17. Cara valeu mesmo, passei muito tempo procurando isso e só agora encontrei o um jeito que deu certo no meu blog, fiz até umas pequenas mudanças e deus certo. Agradeço de coração, vlw.

    ResponderExcluir
  18. cara tentei botar isso no meu, fiz e refiz umas 5 vezes , mas sempre aparece isso TEMPLATE ERROR: LHS of numeric is null before 40 in e o menu fica todo doido
    sabe oq pode ser ?

    ResponderExcluir
    Respostas
    1. Olá Lucas!
      Esse menu funciona perfeitamente, acho que você não inseriu o código do menu no local corretamente.

      Excluir
  19. http://www.tendtudo190.blogspot.com.br/

    ResponderExcluir
  20. Gentem, por favor me ajudem não consigo fazer nehuma alteração porque qdo clico em EDITAR HTML em seguida pede p que clique em PROSSEGUIR...e essa zorra do PROSEGUIR, ñ aparece pra mim em canto nenhum. Como faço alguém pode me ajudar pq n aparece pra mim o PROSSEGIUR e eu possa dar continuidade nas minhas alterações.

    ResponderExcluir
    Respostas
    1. Olá Ana Paula!
      Na verdade, é que essa opção "Prosseguir" não existe mais no editor HTML do Blog, pois houve uma "atualização" no Editor do Blog, agora tem uma nova interface e algumas opções antigas saíram e novas opções sugiram no Editor HTML. (esse tutorial foi publicado ainda com a interface antiga)
      Observe: Você pode seguir os passos deste tutorial e não precisa se preocupar com a opção "Prosseguir" e o resto estará tudo certo.
      Obrigado!

      Excluir
    2. O Blogger faz isso sem precisar alterar o HTML

      Excluir
  21. Kelven, muito obrigada eu conseguir fazer e deu tudo certo. Só não estou satisfeita com a imagem do meu menu e não consigo colocar um modelo que quero. Mas oq preciso mesmo no momento é como alterar a fonte. vc sabe me dizer?? Fico no aguardo e obg...seu blog é 10!!!!!!

    ResponderExcluir
    Respostas
    1. Olá Ana Paula!..
      Para alterar a fonte do Menu é fácil, só seguir essas instruções:
      >> 1º passo: você tem que pesquisar no Google: "Fontes em CSS" ou "Tipos de Letra em CSS". No resultado da busca, você encontrará vários sites que disponibilizam as fontes em CSS, então é só "escolhe" um tipo de letra que você acha legal e "copiar".

      >> 2º passo: no código CSS do Menu, existe dois trechos que representa a fonte da letra, o primeiro é este aqui:
      font: bold 14px "ms sans serif", verdana, arial;
      o segundo trecho é este aqui:
      font: normal 14px "ms sans serif", verdana, arial;

      Então, você vai substituir esta parte :
      "ms sans serif", verdana, arial
      pelo CSS da letra que você deseja colocar no Menu, substitua nos dois trechos sitado.
      depois é só visualizar Modelo, e se estever tudo certinho, salve o modelo...
      Espero ter ajudado, fico grato por ter comentado, Obrigado!

      Excluir
  22. Este comentário foi removido pelo autor.

    ResponderExcluir
  23. Oiiiie Kelven, muiiiito obrigada deu muito certo!!!
    Agradeço por sempre responder meus questionamentos, tem me ajudado muito.
    Deixa esclarecer maus uma dúvida fiz o meu menu horizontal conforme suas orentações, porém o mesmo ficou fixadop no topo do meu blog, acima do título e da descrição do blog.
    E não é assim que quero, quero que o mesmo fique abaixo do título do blog e da descrição do mesmo. RESUMINDO quero que fique extamente como está aqui no seu blog. Como faço?? Pode me ajudar??!!

    Mais uma dúvida, meu blog ñ aparece nas buscas do google, como faço??? Sendo que personalizei para aparecer. Se vc tiver algum post que fale sobre isso por favor coloque o link aqui para eu verificar.

    PARABÉNS PELO BLOG VOU ADICIONA LO NO MEU BLOG COMO RECOMENDAÇÃO

    ResponderExcluir
    Respostas
    1. Olá Ana Paula!
      Se o menu ficou no topo do Blog, é porque você inseriu o código em um "outro" local.
      Você tem que "INSERIR" o segundo código "ABAIXO" da Tag /header que foi sitada no 5º Passo.
      ......
      Se seu Blog for "recente" e não está aparecendo nos resultados do Google, você terá que "aguardar" pois o Blogger cuidará da indexação das suas publicações para aparecerem no mecanismo de Busca e isso é feito automaticamente. E na parte de Otimização (SEO) do Blog, o uso correto das tags, descrição, títulos e links também ajudam o Blog a aparecer no mecanismo de busca e etc...

      Observe: tem uma opção nas configurações do Blog que permite deixar o Blog visível para os mecanismos, e se essa opção estiver "não autorizando" você terá que alterá-la para permitir que mecanismo encontre seu blog, para isso você vai no painel de edição do blog, em:
      Configurações >> Basico >> Privacidade >> clique em "Editar" e vai aparecer duas opções, e você vai selecionar a opção "SIM" para ambas (Adicionar o seu blog às nossas listagens?) (Permitir que mecanismos de pesquisa localizem seu blog?)

      Obrigado

      Excluir
  24. Kelven o problema de busac foi resolvido, muito obrigada! Já esta aparecendo nas buscas fiz um passo a passo que peguei no seu blog.Quanto ao menu, fiz do jeito que você informou desde a primeira vez coloquei o cód. em baixo do Tag /header e mesmo assim ele ficou do topo. DETALHE que o header que encontrei ñ aparece com o R no final do jeito que vc escreveu na postagem. Estranho néh??? Pq será, me ajuda aii vai se eu apagr tudo será que desconfiguro o meu blog???

    ResponderExcluir

    ResponderExcluir
    Respostas
    1. Olá Ana Paula!
      Eu dei uma olhada no seu Blog, e percebi que você inseriu o código no lugar errado.
      Você colocou o código do menu abaixo da tag "< / head >" que representa o topo do blog.
      Mas a tag correta para coloca o código do menu é a tag "< / header >" que representa o cabeçalho do blog. (observe que são tags bem parecidas)
      O que você tem que fazer é, encontrar o código do Menu, em seguida, removê-lo e inseri-lo abaixo da Tag correta "< / header >".
      para encontrar o segundo código, utilize as teclas de atalho "Ctrl+F".
      Ana paula, não fique preocupada em remover o código pois não tem nem um problema, qualquer coisa deixa comentário ficarei no aguardo. Obrigado!!!

      Excluir
  25. Uhuuuuuuuu voce é 10 Kelven, muiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiito obrigada deu certro oq vc me ensinou.
    Dx fazer mais uma pergunta, em cada titulo so cabem 3sub tiutlos?
    Por ex no dicas da prô eu tenho dentro dele hora do conto estante virtual e sobra mais um. só que quero mais uns 2 ou 3 dentro desta aba e vejo que so vai ate o 3 ou seja é só isso mesmo????

    beijos e muiiiiiiiiiiiiiiiiiiiiiiiiiiito obg!!!!!

    ResponderExcluir
    Respostas
    1. Oi Ana Paula!!!!!!!
      Este menu ele é totalmente Editavel, você pode retirar ou acrescentar mais Sub-menus que desejar.
      [1º] Pra colocar basta ir no HTML e procurar pelo código do menu.
      [2º] Observe que no código do menu, tem um '"sub-menu"" chamado "TITULO3", então você vai ""Copiar" (toda a linha que ele se entra) e "colá-lo abaixo" da mesma.
      Portanto, pra adicionar mais menus, basta você repetir o codigo mais vezes de acordo com o que falei, certo!
      somente isso.
      Fico grato por estar comentando...Obrigado!

      Excluir
  26. Uhuuuu arrasouuuuuuu vc é m10!!!
    Vou fazer isso evolto aqui p falar se deu certo tô indicando seu blog pra geral. Se n fosse seu blog eu nem sei oq ia fazer com o meu rs, pois como pode vê sou nova nessa de blog e aqui faço tudo que preciso muiiiiiiiiiiiiiiiiiiiiiiiiiiiiiito obg pela sua atenção


    beijos

    ResponderExcluir
  27. Oiiiiiiie Kelven, td bem??!!

    Por favor responde a pergunta que fiz neste link do seu blog

    http://variasdicasparablogs.blogspot.com.br/2012/09/como-adicionar-o-gadget-seguidores-no.html


    Preciso de ajuda de novo rs

    beijos e obrigada!!!!!

    ResponderExcluir
  28. Olá, primeiramente gostaria de agradecer por ajudar a todos nós com mais esse belo tutorial.

    Gostaria de saber como posso ajustar o número de menus, pois coloquei 5 itens e o 6º já foi para baixo, então vou precisar de uns 8 itens como menu. Meu layout tem 980px.

    Desde já, muito obrigado!

    ResponderExcluir
  29. qual teample eu devo usar para o sub menu pq oq eu uso não tem tag e header

    ResponderExcluir
  30. oii poderia me ajudar sempre quando tenho que colocar algo acima como por eemplo o primeiro código nunca da certo nao aperece nada pode me dizer o que estou fazendo de errado por favor ja tentei varias vezes mas não consigo obrigadoo.

    ResponderExcluir
  31. Não encontrei a tag somente header o q faço agora?

    ResponderExcluir
  32. Não encontrei a tag " " somente "header " o q faço agora?

    ResponderExcluir
  33. Como faço para editar a cor do menu?

    ResponderExcluir
  34. Oi Kelven!
    Tudo bem?
    Fiz vários menus desse, também baixei daquele site cssmenumaker, mas nenhum funciona.
    Todos ficam com os submenus atrás das postagens, tampados ali. Não é possível vê-los.
    Por último tentei colocar um vertical, mas os submenus continuam não aparecendo.
    Vi várias pessoas com esse problema, porém ninguém respondia como solucioná-lo.
    Poderia me ajudar, porfavor? "Quia necessito valde!"
    Imensamente agradecido!

    http://321teste12312312.blogspot.com.br/#

    ResponderExcluir
  35. Oi Kelven blz ? Kra consegui coloca-lo fino de mais, so´tenho um probleminha quando acesso o mouse no submenu ele some me ajuda ai tem como? da uma olhada pra vc ver la http://onggrupovida.blogspot.com.br/

    ResponderExcluir
  36. :/ as minhas tags aparecem no topo do blog :/
    me ajuda ai Kelven

    ResponderExcluir
  37. Ola Kelven como faço para criar um terceiro nivel nesse menu?

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook