Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Menus Vanessa S.

Como Instalar Menus do CSS Menu Maker no Blogger

O CSS Menu Maker oferece um excelente serviço gratuito de criação de menus, onde você pode construir o menu do seu blog de maneira bem fácil.

O processo de criação de um menu pelo CSS Menu Maker é bem simples, você precisa selecionar o modelo do menu que você quer, e personaliza-lo.
Eu já publiquei um artigo disponibilizando alguns sites Geradores de Menus CSS para Blogs, inclusive sobre o CSS Menu Maker, onde você pode construir seu menu de maneira fácil e rápida.

Porém, a grande dúvida de alguns usuários é: depois de escolher o menu, como personaliza-lo e como instalar estes menus no Blogger?
O processo de instalação destes menus no Blogger é um pouco complicado, mas usuários intermediários ou mais avançados não terão dificuldades.
E é isso que eu vou explicar hoje.
Veremos como personalizar um menu do site CSS Menu Maker e como instala-lo no Blogger.

1º Passo – Escolher o modelo de menu

Acesse o site CSS Menu Maker e escolha o modelo de menu que você quer, que pode ser: DropDown, Horizontal ou Vertical.

2º Passo – Customizar o Menu

Escolhido o modelo, clique no botão “Customize” que aparece logo abaixo.
Para exemplificar, eu escolhi o modelo de menu horizontal “Simple blue tabbed”

Clique em “Add Button” para adicionar os botões e os links no seu menu.
A cada botão que você quiser adicionar, clique novamente em “Add Button” e vá inserindo o titulo do botão e os links que ficarão no seu menu.
Em “target“, se você selecionar a opção “same window” os links abrirão na mesma página. Se você quiser que os links abram em nova aba, marque a opção “New Window“.
Você pode clicar em “Preview” para visualizar o menu e verificar se está tudo correto.

Caso queira editar alguma coisa, basta clicar em “Keep edit my menu” para voltar a pagina anterior.

3º Passo – Fazer download do arquivo do menu

Agora você deve fazer o download do arquivo que contém os códigos que farão o seu menu funcionar.
Clique em “Download Now“.

Salve o arquivo no seu pc. Você deve descompactar o arquivo.

4º Passo – Hospedar e acrescentar as imagens no código CSS do Menu

Dentro da pasta “Menu“, existe uma outra pasta “Images” que contem as imagens que serão utilizadas no menu.
Não altere o nome das imagens, hospede-as exatamente com o mesmo nome original que veio na pasta.
Agora você deve hospedar as imagens que compõem o menu no seu site preferido. Eu recomendo o Picasa Web.

Abra o arquivo “menu_style“.
Substitua todos os campos que tiverem endereço da imagem, pela url da sua imagem que você hospedou.
Coloque as imagens que são pedidas para cada trecho de acordo com o nome de cada imagem.

Por exemplo:

background: #FFF url("images/menu-bg.gif") top left repeat-x; 

Em “images/menu-bg.gif” você vai substituir essa url pela imagem de nome menu-bg que estava na pasta “Images” e que você hospedou.
Faça isso em todos os campos “background” que contiver endereço de imagem entre parenteses.

 

5º Passo – Acrescentar o código CSS no template

Depois de editar o código CSS substituindo as urls constantes no código pela url das suas imagens, copie todo o código deste arquivo.
Vá  no menu ” Modelo”, opção ” Editar HTML” no seu template e procure pela tag ]]></b:skin>
e cole ANTES dela o código que você copiou do arquivo “menu_style“.
Salve as alterações!

6º Passo – Inserir o código HTML do menu no template

Abra novamente a pasta do arquivo que você baixou com o menu no seu pc.
Abra o arquivo “installation_instruction
Vai abrir uma janela com um código HTML dentro de uma caixa.

Copie somente o trecho de código que aparece abaixo de </head>
E cole no local que você quer que seu menu apareça.

[dica]Dica:
Se você escolheu um menu horizontal e quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.
Se quiser que o menu fique visível acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.
Se estiver usando algum modelo de template do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header> .
Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: <div id=’header-wrapper’>
[/dica]

Antes que me perguntem:

1. Você que deverá escolher o local mais adequado para instalar o seu menu no template.
Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.
2. Esses menus já vem prontos e são disponibilizados pelo site. Os estilos de cada um deles já vem pre-formatado. Se quiser alterar algum estilo terá que mexer no código do arquivo “menu_style”. Mas aconselho que faça isso apenas se tiver um conhecimento mais avançado em css.

Bom, é isso! Espero ter ajudado.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

56 Comentários

  1. Oi aqui segui seus passo porem nao estou entendendo o item 4 em diante me explica melhor pq baixai ja o arquivo porem nao sei o faço ?? me ajuda em detalhes por favor obrigado abços

  2. Blenda Luane disse:

    Consegui adicionar mas como eu edito as paginas ? Quando coloco o mouse em cima dos sub menus some .. Como eu edito cada pagina ?

  3. ailton disse:

    Muito obrigado adicionei o menu ao meu blog sem problemas agora só estou tentando alterar a largura mas isso é o de menos

  4. Juan Marx disse:

    =( eu já sabia como colocar, vim aki pra ver se resolvia um problema, o menu que eu fiz tem submenus, mas eles não aparecem.

  5. ADM AnzyNn disse:

    Olá..to com o mesmo problema de alguns aii….quando chega para colocar o codigo html…não sei exatamente onde colocar…ja coloquei em cima de e em baixo de …mas quando visualizar da erro…por favor mim ajuda a instalar.porque eu gostei de um mas não to conseguindo…lembrando que meu template é o template viagem do blogger..muito obrigado ii to aguardando respostas o mais rapido possivel vlw??..

    Muito Obrigado…

    • ADM AnzyNn disse:

      ahhhh…ja consegui colocar…muito obrigado viu…agora só tenho uma duvida tem como diminuir o tamanho dele?..porque no meu blog ficou um pouco grande…
      Aguardo respostas…Abraçoo..^^

      • Vanessa disse:

        Deve ter sim, mas não há como eu te prestar uma informação precisa, pois depende do modelo do seu menu, do seu template. Não há como eu saber.

  6. Killua Freecs disse:

    bem é que gostaria de colocar mais de saber como faço para colocar mais sub menu pois s@o da para colocar dois n:ao importa qual eu tente aproposito coloquei o banner em show slide como mostra sua outra postagem adorei ela muito obrigado ^-^

    • Killua Freecs disse:

      consegui fazer o menu só que o meu só usa css(no caso depois que descompaquito tem duas coisas uma pasta com o nome “menu_assets” e o arquivo css dentro e do lado da pasta tem um link com o nome “instructions” sei que é instrução só que alem de inglês esta muito vago também pois quando traduz aqui no meu computador muda muitas palavras oque eu faço para postar ele no blog?

  7. Jéssica disse:

    Oi! Eu consegui colocar o menu, só que o submenu não aparece.. O que posso fazer? Gosto muito do seu blog =D

  8. Thaina disse:

    Eu queria saber como que eu faço pra ultilizar o menu, pois não consigo fazer postagens nele. ME AJUDE PLEASE 🙁

  9. Saekawaii disse:

    o meu não veio com pasta Images… será que de lá pra cá eles ja mudaram a forma como eles fazem isso?

  10. Nicole disse:

    Olá, eu já tenho um menu instalado e personalizado. O meu problema é como faço pra utilizá-lo, ou seja, como eu organizo cada postagem em um menu diferente.

  11. Pablo disse:

    LOL.. vlw pelo tuto
    deu certinho, fiz em um blog de teste antes !! Não preciso mais fica mapeando imagem pra fazer menu !! E tem dropdown.. ^^
    Muito bom esse site 😀

  12. Lucas disse:

    Olá, eu gostaria muito de ajuda!! Eu baixei o arquivo, só que a um probleminha… Veio só com o código CSS, sem imagem alguma…O que eu faço??

    • Vanessa disse:

      Tente baixar novamente para ver se vem as imagens. Se mesmo assim não vier..lamento,mas não sei e nem tenho como te ajudar.

  13. Jhonn disse:

    Como faço pra deixar os botões no Centro ? É que eles ficam todos no canto. XD

  14. Jhonathan disse:

    Olá boa noite!
    Querida, coloquei um menu dropdown o meu blog, mas não consigo clicar nos nomes que aperecem no dropdown!
    Você pode me ajudar a resolver este problema?

    Grato
    Jhonathan

  15. Ademar Alves disse:

    Olá!
    O texto do arquivo “styles” consegui colocar sem problemas no meu blog, mas sempre que vou colocar o código do arquivo “instructions” aparece a seguinte mensagem no meu blog:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “link” must be terminated by the matching end-tag “”.

    Error 500

    Então vc poderia me informar por e-mail qual o problema que está ocorrendo aqui?
    Aguardo resposta.

    Att,
    Ademar Alves

    • Vanessa disse:

      Olá Ademar,boa noite.
      Lamento,mas primeiramente devo esclarecer que,não reespondemos dúvidas nem enviamos orientações através de email. Por favor, peço que leia os Termos de Uso do Blog.
      Sobre sua dúvida, verifique se vc seguiu os passos do tutorial corretamente.

      • Ademar Alves disse:

        Entendi.
        Segui sim todos os passos, porém só o último passo (6º passo), que ocorreu esse erro no meu blog. Pois no código HTML do blog, não sei o lugar correto que devo postar o código da dica do 6º passo. Vc poderia me informar depois ou antes de qual código devo postar? Pois quero colocar o menu antes do cabeçalho.

        Att,
        Ademar Alves da Silva

        • Vanessa disse:

          Nos templates do “designer de modelo do blogger”,a tag referente ao cabeçalho é: <header>
          Se quer que fique abaixo dele, tem que colar o código abaixo da tag: </header>

  16. Filipe disse:

    o meu site esta fora do ar kkk.
    Fui o 1.500 a seguir o site. TEM PREMIO? KKK
    Muito boa a explicação

  17. Blog do Eu Sozinha disse:

    Quando eu colo o código antes do ]]> (passo 5), aparece a mensagem: "Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Mais de um item encontrado com o id: Navbar1. Os IDs de itens devem ser únicos e exclusivos."

    Até aqui tava tudo indo bem, agora travei nessa parte. Você saberia me dizer qual é o problema?

    Bjssss

    • Vanessa disse:

      A propria mensagem já informa qual é o erro: “Mais de um item encontrado com o id: Navbar1.”
      Vc tem que renomear esse item, colocar outro nome. Tenta colocar Navbar2.

  18. Murilo Soares disse:

    Muito bom mesmo…Parabéns para este blog!

  19. Telenoveleiros! disse:

    Bom, finalmente consegui colocar a barra abaixo do título, posicionando o gadget do menu acima do gadget da postagem… entretanto, os submenus somente são visualizados completamente nos navegadores Mozilla e Chrome, infelizmente no Explorer apresenta falhas e os submenus não são exibidos por completo.

  20. Telenoveleiros! disse:

    O meu tá certo, o gadget com a barra de menus funciona em qualquer local do layout, menos onde eu gostaria que funcionasse: abaixo do título do blog, o que pode estar acontecendo, preciso de ajuda…

  21. O Gênio Idiota disse:

    CSS Menu Maker mudou muito, agora colocaram um cadastro por email e por um acaso lá não aceita o meu…

  22. Poderosa Nandinha disse:

    Montei Um blog pra mim e outro pra minha amiga só com dicas suas … obrigada.
    Nunca tive blog e não fazia idéia do que era HTML , mas vc explica tudo tão explicadinho que não tem como não acertar,hoje até que não me considero tão leiga de tanto que leio seu blog…Parabéns

  23. Miguel disse:

    Impressionante como uma pessoa consegue modificar um blog como você, ficou maravilhoso seu blog Clau… Obrigado pelo tutorial 🙂

  24. Gesi disse:

    Parabéns pelo post. Bem formulado e claro. Excelente!

  25. Mapa de Free Rider 2 disse:

    Tem outra quando eu clico no botão do menu ele vai exemplo: downloaddownload.blogspot.com/downloaddecoisasla.blogspot.com/
    eu coloquei la no lugar onde tem o url só downloaddecoisasla.blogspot.com/
    tem como clicar no botão e ir só em downloaddecoisasla.blogspot.com/

    ???

  26. .:: Clau ::. disse:

    Não, Como Assim?
    Tais recursos podem variar de template para template, sendo assim, não tenho como te ajudar.

  27. Não, Como Assim? disse:

    oi… ãh eu colei o codigo abaixo de pois uso um template do desing de modelo, e msm assim nao da certo, aparece q "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag"
    Como eu resolvo
    Obg

  28. .:: Clau ::. disse:

    Mapa de Free Rider 2
    A questão ai é vc escolher um outro menu no site que combine com o seu template. Conforme já falei acima, no comentário nº12: Esses menus já vem prontos e são disponibilizados pelo site. Os estilos de cada um deles já vem pre-formatado. Se vc quiser alterar algum estilo vai ter q mexer no código do arquivo "menu_style". Mas aconselho q faça isso apenas se tiver um conhecimento mais avançado em css.

  29. Mapa de Free Rider 2 disse:

    Ola Clau estou com um problema no menu, meu menu esta branco e o meu Blog tem características pretas, tem como eu deixar da cor do menu?
    Tem mais uma 🙁 como tira aquele quadradinho que fica na ponta do menu??

  30. Mapa de Free Rider 2 disse:

    Clau olha os resultados: http://img821.imageshack.us/img821/1613/menusq.png
    Minha home é preta e o menu ta feio pois em baixo dele é branco, e tambem os quadrados nas pontas do menu como tirar isso?

  31. .:: Clau ::. disse:

    Não, Como Assim?
    Dá uma lida no box de dica que está no final do post.

  32. Não, Como Assim? disse:

    Oi eu consegui baixar, hospedar a img, copiei o codigo mas nao sei onde botar, gostaria de colocar ele abaixo do cabeçaho, teria um tutorial para saber onde colocar?
    obg- post mto bom ajudou apesar de nao ter terminado… ainda

  33. Driko disse:

    Ola, Clau é o seguinte o menu ta la tudo certinho mais fiko akela barra da blogger em baixo ai fiko ruim aki como q tira akela barra pq eu n consegui

  34. chris disse:

    amei seu blog parabéns !!!

  35. .:: Clau ::. disse:

    Gustavo – querocriarumblog.com.br
    Obrigada pelo comentário =)

    ' FCAMC ' FÃ CLUBE AMO MILEY CYRUS
    Eu já publiquei um outro tutorial ensinando a instalar um outro tipo de menu no topo. A única forma q posso te ajudar é recomendando q vc tente seguir o 3º passo deste tutorial aqui:
    Menu auto ocultável no topo do blog

  36. .:: Clau ::. disse:

    Moema
    Esses menus já vem prontos e são disponibilizados pelo site. Os estilos de cada um deles já vem pre-formatado. Se vc quiser alterar algum estilo vai ter q mexer no código do arquivo "menu_style". Mas aconselho q faça isso apenas se tiver um conhecimento mais avançado em css.

    blogdomateushonorio
    Eu já uso essa tag, não sei pq sumiu, pois pra mim tá aparecendo normal. Mas de qualquer forma, muito obrigada pelo toque viu?

    Guto
    Eu recomendo q vc leia o artigo: "personalizando os títulos dos posts", pode ser q te ajude.

  37. ' FCAMC ' FÃ CLUBE AMO MILEY CYRUS disse:

    Clau eu queria colocar em cima da cabeçalho, vc pode me ajudar????

  38. querocriarumblog.com.br disse:

    Clau,
    já utilizo o CSS Menu Maker em temas que desenvolvo para o wordpress, e já havia escrito sobre ele no GF Soluções, mas nunca tinha visto um tutorial tão completo para utilizá-lo no Blogger.
    Parabéns pelo artigo,
    abraço.

  39. Guto disse:

    oi clau! adoro seu blog! aprendi muita coisa com vocÊ viu!!! Sei que não tem nada ver com esse post mas estou desesperado com o seguinte fato–>> criei um blog para minha esposa e eu e o problema é o seguinte…quando eu clico no link de alguma postagem para visualiza-la por completo eu reparo que o titulo desalinha. tentei futrica em tudo mas não resolvi o problema. Poderia dar uma olhadinha para mim e se possivel corrigir ou fazer um tuto sobre como arrumar este problema? obrigado desde já e parabéns pelo ótimo trabalho.

    http://www.curiosozoio.blogspot.com

  40. blogdomateushonorio disse:

    Clau, um erro no seu template está ocorrendo no google chrome. Os links de navegação na página inicial do seu blog, não aparecem. Andei fuçando pelo firebug do chrome e descobri que você tem que adicionar o valor:
    "clear: both;"
    para o estilo da div "blog-pager". Assim normalizará no Mozilla e Chrome.

  41. Moema disse:

    E como faço para editar as cores do menu?
    É igual a qualquer outro menu ou tem algum detalhe diferente?

  42. .:: Clau ::. disse:

    Felipe Correia
    Obrigada e valeu pela dica.

    mensagenspublicas
    Obrigada pelo comentário.

  43. mensagenspublicas disse:

    Clau tu és incansável.. Sempre a ajudar aqui o pessoal e com tutoriais super completos..

    O link para o teu blog vai estar sempre no top dos meus "sites favoritos" no meu blog..

    Já me ajudas-te a resolver minhentos problemas no blog..

    Abraço =)

  44. Felipe Correia disse:

    Muito boa dica, Valeu!
    Eu usava um menu desses, mas depois eu descobri o site http://www.styledmenus.com que também tem muitos styles legais lá vale apena dar uma conferida!
    Abraços!

  45. .:: Clau ::. disse:

    Roger Dance
    Que bom que o artigo ajudou e que vc conseguiu!;)

    Beto Default
    Já tem tutorial publicado sobre o LightBox, mas eu uso o Shadowbox aqui no MB.

  46. Beto Default disse:

    Muito boa a dica Clau . Uma coisa fugindo um pouco do assunto mas nao do css hehe, instala o Light Box aqui no blog Clau, ou faz um post ensinando como instalar, acho que irão gostar 🙂

  47. mundodadanca1 disse:

    Olá Clau!

    Nossa até parece transmimento de pensação…rsrsrsrs
    Era exatamente isso que eu estava procurando por esses dias. Estou muito incomodado com meu atual menu e gostaria de melhorá-lo. Essa postagem veio mesmo na hora certa. Entendi tudo e estou contente por estar classificado como usuário intermediário.

    Abraço
    Roger Dance

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.