Personalizando o menu do blogger

Semana passada não deu tempo de colocar o tutorial no ar porque eu estava em semana de prova na faculdade. Mas agora esta tudo mais calmo e estou postando mais um tutorial sugerido por vocês. 

Gente, não tem nenhum mistério em utilizar o menu automático do blogger é simples de ativar e editar. O menu também funciona nos dispositivos móveis, caso o seu layout não seja responsivo. 

Como ativar o menu automático: blogger > páginas > nova página > edite a página > publique.  
Para colocar links externos, como por exemplo as categorias do seu blog: visualize o blog > clique no item da ferramenta de edição > + adicionar link externo. 

Este tutorial vai te ensinar a deixar o menu do jeito que esta na foto. É necessário apagar todos os códigos antigos antes de adicionar os novos. 
ps: como assim apagar os códigos antigos? R: o seu layout veio com um menu certo? então apague o código que pertence a ele, ou seja, apague o código do menu atual para colocar o novo :) 

Muitas vezes o CSS esta 'escondido' dentro do template, caso esteja basta clicar em ►<b:skin>...</b:skin> para que você possa visualizar CSS e editar. 


no css:
/* ---  Menu  -------- */
.widget-content { width:100%}
#PageList1 {background: #; width: 100%;height: 44px;  line-height:20px; margin-bottom: 38px; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; text-transform:uppercase; }
#PageList1 ul li a {font-family: &#39;Open Sans Condensed&#39;, sans-serif; color:#737373; text-decoration: none;
font-size: 24px; padding: 05px; font-weight: 300; -webkit-transition-duration: .50s;-moz-transition:  50s; -o-transition: 50s;}
#PageList1 ul li a:hover {color:#9f9f9f;text-decoration: none;}
/* ---  Fim do Menu  -------- */

Para posicionar o menu antes das postagens encontre a tag  '<body>' e procure por ''<div id='content-wrapper'>" e logo depois dessa linha cole este código (click no link).

Personalizando o menu:
border (bottom / top) - linha do menu;
font-family - tipo da fonte;
font-weight - normal, bold, bolder, lighter, 100, 200, 300, 400;
font-style - estilo da font, suas variações são oblique, initial, inherit.
text-transform: uppercase -  texto maiúsculo, suas variações: none: texto normal, capitalize: todas as primeiras letras do texto em maiúsculas, lowercase: todas as letras do texto em minúsculas ; 
#PageList1 ul li a - cor do link, tipo de fonte, tamanho, padding (espassamento);
#PageList1 ul li a:hover - cor do link quando clicar;
#PageList1 - width (tamanho total do menu), height (altura do menu), aqui você pode adicionar cor no fundo em 'background'. 

Fonte que utilizei: <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Deixe sugestões para os próximos tutoriais.


Comente pelo Facebook

48 comentários:

  1. Bruna,eu estava procurando este tutu..rsrs...na realidade eu queria mesmo um template seu baixei mas veio com muitas propagandas,meu antivírus bloqueou.
    Fiquei só com a vontade.
    Eu tenho Instagram mas não consegui te seguir.
    Parabéns pelo tutorial,beijos

    ResponderExcluir
    Respostas
    1. Obrigado!
      Como assim não conseguiu? Meu insta é publico ^^

      Beijos

      Excluir
  2. meu blog ainda não tem um menu, porque eu não vi necessidade de colocar, mas acho que logo terei, e tava procurando um tutorial que só personalizasse o menu do blogger mesmo, deixasse simples e bonito, esse é ótimo! acho que logo vou usá-lo.

    kissus, winterofme.blogspot.com

    ResponderExcluir
    Respostas
    1. Acho importante um menu, ainda bem que você gostou :D

      Beijos

      Excluir
  3. Acho que você acabou de salvar a minha vida ! SAUSHAUSH' MUITO MUITO MUITO OBRIGADA BRU !

    Beijos , Maary
    Fantasmas&Flores

    ResponderExcluir
  4. Ei, eu adoro seu blog!
    inclusive já peguei Template seu ♥ me visita qualquer hora!!

    ResponderExcluir
  5. Aaah, o tutorial que sugeri <3 Valu Bruna, amo suas ajudas que html, sempre me salvam! hahaha Beijão

    Coisa da Lud

    ResponderExcluir
  6. Bru, onde você edita suas fotos?

    ResponderExcluir
    Respostas
    1. qual o nome, poderia me dizer? acho suas edições tão fofas. obrigada!

      Excluir
  7. Adorei o tutorial !!! Eu sou não entendo nada de HTML e uma ajudinha é sempre bem vinda !!! Sofro toda vez que quero alterar alguma coisa no código do blog, rsrsrssr.
    Na próxima vez que eu for mudar o menu com certeza vou utilizar as suas dicas !!!
    Eu não sei se você já fez um tutorial assim, mas adoraria entender como faz para adicionar imagens, linhas e outros elementos na barra lateral do blog, como tem aqui no seu com as linhas em zigue zague !!!

    Beijinhos

    ResponderExcluir
    Respostas
    1. Obrigadaaaa,
      seu pedido esta anotado para o próximo tutorial!

      Beijos

      Excluir
  8. Não achei o "'content-wrapper'>" do meu blog. Tem um outro método?

    ResponderExcluir
  9. Eu já tenho um menu como esse.Tenho que fazer esse mesmo processo de apagar os códigos,ou tem outro método? Amei o tutorial ;D

    ResponderExcluir
  10. Não consegui Bruna, Não consigo achar a ('''') :(
    Beijos

    ResponderExcluir
  11. Oi Bruna, eu amei seus layouts e até estou usando um, mas gostaria de saber como posso diminuir os espaços entre um link e outro do menu. No meu caso eles estão bastante separados e alguns estão fora da barra que deveriam ficar.

    Beijos

    ResponderExcluir
    Respostas
    1. Você precisar diminuir o valor padding ou margin, vai diminuindo e vai testando Alice :D

      Excluir
    2. Valeu!! Demoreeeei, pra achar, mas consegui. o/
      Uma pena não ter como colocar submenu. =/
      Obrigadão!!

      Excluir
  12. Ah, só mais uma pergunta, como posso colocar submenu nesse layout que estou usando?
    Obrigada =)

    ResponderExcluir
    Respostas
    1. O menu do automático não possui essa opção.

      Excluir
  13. Lindo o layout e já estou usando.
    Queria saber como mudar a cor dos links, poderia me informar? Beijos

    ResponderExcluir
    Respostas
    1. Modelo>Personalizar>Avançado>Texto das guias. Aí vai ta a opção de mudar a fonte e a cor.

      Excluir
    2. Oi, queria saber como centraliza o texto desse menu
      brigada bjuu

      Excluir
  14. Bruna sua diva! Você fez algum curso de web designer?

    ResponderExcluir
    Respostas
    1. Oii Juliana,
      Não fiz curso de nada, aprendi tudo que sei lendo tutoriais na internet mesmo :DD

      Beijos

      Excluir
  15. Eu não consigo fazer :( deve ser complicado demais pra mim! O que ta me pegando é o CSS, eu realmente não entendi!! Beijos!

    ResponderExcluir
  16. Olá, muito obrigada pelo tutoria!
    Como centralizo o menu? O meu fica muito para esquerda.

    ResponderExcluir
  17. Eu não entendi isso do CSS, esse código acima é para colocar onde exatamente? :s

    ResponderExcluir
  18. Desculpa ser tão chata mas outra coisa, eu não encontro essa linha "(...)content-wrapper(..)" :((

    ResponderExcluir
  19. Bruuuuuu, me ajuda por favor.
    Não to conseguindo alinhar o menu, tipo que nem ta aqui (asbrazil.blogspot.com) ta vendo?? Fica um em cima do outro, o que eu faço? :((

    ResponderExcluir
  20. Eu não consegui encontrar o body nem o tal do (...)wrapper. Poderia em ajudar por favor! Obrigada Bruna!

    ResponderExcluir
  21. Bru, pode me ajudar? Não acho o 'body', e agora?

    ResponderExcluir
  22. Olá bruna, muito bom o tutorial parabéns!
    Só estou com um problema, eu usei seu código e tudo mais, mas, eu preciso de um submenu só que não consigo adaptar seu código para isso, sabe uma forma fácil de fazer isso com o seu código?

    ResponderExcluir
  23. Adoro tutoriais para blog! Conheci você através do blog da Lilian. Já estou seguindo, beijos!

    www.coisasdemair.com.br

    ResponderExcluir
  24. Olá Bruna!
    Qual foi o modelo que você usou para fazer o tutorial? eu usei o modelo travel e esse code content-wrapper não tem nele , como eu faço para por no blog?.
    Obrigada desde já!

    ResponderExcluir
  25. Não tem o 'content-wrapper'> no meu layout :( Que faço ?

    ResponderExcluir
  26. Linda, quando vc esse tuto que modelo de blog tava usandotipo (simple, awesome...) ? bjs amei

    ResponderExcluir
  27. Bru faz tutorial de como colocar categorias tipo a sua, bjs

    ResponderExcluir
  28. Gente, vou explicar melhor pra quem não entedeu a parte "É necessário apagar todos os códigos antigos antes de adicionar os novos." Algumas pessoas devem estar se perguntando que código é esse...é o seguinte:

    Dê CTRL+F e procure por /* Tabs, apague todo o código desde /*TABS até o código que antecede /* Headings

    No lugar do código que vc apagou cole esse código q a Bru passou.






    Bru acho que você oderia explicar melhor seus tutoriais :/
    Tipo, tem gente que não sabe QUAL O CÓDIGO de qual coisa..eu por exemplo, demorei muito entender q código é esse do menu e foi com um tutorial de outro blog.


    Espero que entenda ^-^
    Beijos



    http://www.dearmaidy.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, só depois que eu li seu comentário deu certo o código!!bjoo

      Excluir
  29. oi, eu amei o tutorial eu estava muito procurando esse estilo de menu. Queria saber, por favor, como aumenta a margem do texto com relação a borda de cima. Porque no meu o texto ficou muito em cima e em baixo sobrou espaço. Me ensina?

    ResponderExcluir
  30. Olá!!! Muito obrigada por disponibilizar esse código eu estava buscando um que funcionasse para o blogger, mas estava muito difícil!! Finalmente encontrei um!!
    bjoo

    www.taviajandomenina.com.br

    ResponderExcluir
  31. Bru, me ajuda, acho que fiz besteira.
    No layout que eu peguei - o seu Blemish já tinha o menu, e entrei no meu Layout - e apaguei um por um dos que eu tinha lá e depois exclui toda a parte gadget, como faço para reverter isso? Ou fazer de novo ne?
    Bjos e obrigada

    ResponderExcluir