13 de mai. de 2009

Instalando o menu horizontal no Blogger, acima ou abaixo do cabeçalho


Esta dica se aplica ao antigo Blogger, anterior a julho de 2010. Se o seu Blogger é o novo, veja a dica nova AQUI


Para instalar um menu horizontal em seu Blogger, no painel clique em "Design"


Agora clique em "Editar HTML"



Agora procure por:



]]></b:skin>





Agora cole este código acima dele


#navcontainer
{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
}

ul#navlist{
height: 20px;
list-style: none;
padding: 10px;
margin: 0 auto;
width: 90%;
font-size: 0.8em;
}

ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2x;
}

ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ccc #cccc #ccc #fff;
border-style: solid;
color: #000;
text-decoration: none;
background: #eee;
}

#navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }

ul#navlist li#active a{
background: #ccc;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
}


*CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER.



Se você quer o menu acima da header (cabeçalho)

Agora procure pelo seguinte código:  

<div id='header-wrapper'>

E cole este código abaixo depois (abaixo) dele.


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>



Se você quer o menu abaixo da header (cabeçalho)


Procure por:


<div id='content-wrapper'>

e cole o código abaixo dele.


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item8</a></li> </ul>
</div>



Salve e depois faça as modificações como cores, inserir links salvando novamente.


Se você quer saber como instalar o menu na nova plataforma do Blogger, clique AQUI









    69 comentários:

    1. oi vc poderia me dar uma mãozinha?
      eu baixei um template que veio com o desenho do menu horizontal.
      este que vc ensinou eu fiz mas ele só fica acima ou baixo. e eu queria que vc me ajudasse a por elez exatamente nos espaços resevados.
      de uma olhadinha no meu blog e vc vai intender.
      por favor me ajuda viu. volto pra ver a resposta.

      ResponderExcluir
    2. ola florzinha ñ precisa mais me responder eu consegui. e consegui sozinho sem ninguem me ajudar. eu sempre consigo o que eu quero, asvezes isso ate me assusta.

      ResponderExcluir
    3. Ei, que links sao esse?
      Eu consegui fazer o menu, mas os links eu não sei o que são!

      ResponderExcluir
    4. Fiz, deu certo e estou indicando esta página em meu blog. Bj.

      ResponderExcluir
    5. Pra aparcer abaixo da imagem não aparece o código que vc colocou

      ResponderExcluir
    6. malandro valeu pela dica eu coloquei u menu serto + os links nao estao funcionando + valeu msm gostei
      eu vou tenta arruma valeu

      ResponderExcluir
    7. Muito obrigado pelo tutorial! Achei que seria difícil criar um menu abiaxo do cabeçalho, mas com sua dica ficou muito, muito fácil!!! valeu!

      ResponderExcluir
    8. Boa Noite!!! estou instalando esse menu no meu blog só q ele não fica centralizado, como faço?

      desde já agradeço se puder me ajudar.
      me informe sobre sua resposta no meu e-mail marvinoliveiras@hotmail.com

      ResponderExcluir
    9. Olá Muito brigado pela dica de menu. Foi muito útil.

      ResponderExcluir
    10. Valeuuuuuuuuu Ajudou muito brigaduuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu!!!

      ResponderExcluir
    11. Como faz pra nudar a cor do menu?

      ResponderExcluir
    12. Kra, valeu mesmo, já pesquisei na Web toda e o tutorial mais didático foi o seu, parabéns.

      ResponderExcluir
    13. Muito obrigado pelo tutorial, gostei de mais, e agora finalmente consegui colocar um menu horizontal no meu blog. Muito obrigado mesmo cara.

      ResponderExcluir
    14. adorei!!!! valeu pela aula, caonsegui fazer no meu blog!!!!

      ResponderExcluir
    15. Elke, meu blog não tem cabeçalho. Eu uso uma gadget como cabeçalho. Como , ou melhor, onde coloco então?
      Bjus!!!

      ResponderExcluir
    16. No consigui
      fica escrito que eu nao fechei uma tag corretamente?
      porque me ajudem porfavor

      ResponderExcluir
    17. Cara parabens...

      nossa o melhor blog de tutorial

      ResponderExcluir
    18. Oi, preciso de ajuda, o que coloco na parte do endereço do link? Sou eu k crio o endereço? Por exemplo a url de um blog: http://teste.blogspot.com
      mas eu kero colocar no menu do blog home, fotos, assuntos, etc, k endereço é k tenho k dar para cada um? é o mesmo?
      Obrigada

      ResponderExcluir
    19. Resultou perfeitamente a unica forma de mostrar que estou grato e comentar Parabens por o tópico

      ResponderExcluir
    20. como faço para ele ficar centralizado na pagina agora???...aguardo resposta. dyedebootlegs@gmail.com

      ResponderExcluir
    21. O teu blog é muito bom. >> Mas está travando o meu pc>> Como faço para reparar isto >> A tua página está muito pesada >> Minha conexão é de 600 kbps ( Velox)>> Estou precisando pegar nvas dicas e não estou conseguindo devido a morossidade do teu blog. >> Parabéns pelo trabalho. >> e-mail: gegrafica@yahoo.com.br

      ResponderExcluir
    22. Oi. Primeiro, parabéns pelo blog! Consegui instalar a barra, mas quando o blog está totalmente carregado, ela não funciona. Só fica clicável enquanto o blog carrega. Saberia como resolver? Obrigado. leandrodessart@yahoo.com.br

      ResponderExcluir
    23. como faço pra mudar o tamanho e as cores do menu??
      Agradeço a atenção...

      ResponderExcluir
    24. Boa Noite


      Parabéns pelo tutorial !!!!

      Show de Bola Mesmo !!!

      Muito obrigado mesmo

      ResponderExcluir
    25. olha eu fiz o menu mais ele fica em cima do cabeçalho o que devo fazer para colocá-lo abaixo do cabeçalho?

      ResponderExcluir
    26. Amigo Por favor me Ajude eu coloquei com susesso mais quando eu vou no menu horizontal vou para outra pagina que eu não consigo entrar nesta pagina para editar como posso fazer isto.

      ResponderExcluir
    27. Como aumente o menu para o bog no meu ficou um pouco pequena

      ResponderExcluir
    28. mano valeu mesmo eu tava procurando isso a dias e nunca achava muito obrigado mesmo valeuuuuuuououououououououououououououououououououou

      ResponderExcluir
    29. não encontrei o segundo código no meu blog!

      ResponderExcluir
    30. valeew ... o único que eu achei qe deu certo e qe explicou beem .. valew mesmoo ..
      visitem : www.100assunto.com

      ResponderExcluir
    31. Opa , olha eu so não entendi essa parte > Se quer o menu abaixo da imagem do seu template cole o segundo código acima de: , onde coloco o codigo de 3 colunas ?

      ResponderExcluir
    32. me ajuda por favor!!!!
      o nome item ta ficando um abaixo do outro só que eu quero um do lado do outro!!!!!
      alguem sabe como arrumar?

      ResponderExcluir
    33. parabens pelo seu blog muito bom mesmo belo conteúdo

      ResponderExcluir
    34. Bom dia,
      eu cologuei a barra do menu,em meu blog mas não concigo configurar,as paginas tipoo colocar arguivos no item 01,01,03,01,etc.
      vc pode ne ajudar

      ResponderExcluir
    35. @sergio domingues bom dia. Bem, vc tem que copiar o endereço que vc quer colocar nos links e colar onde está escrito:
      AQUI O ENDEREÇO DO SEU LINK

      E escrever o que vc quer que o visitante leia onde está escrito:

      Item 1
      Item 2

      Pois é aí que o visitante irá clicar... Beijos

      ResponderExcluir
    36. eu sou nova nisso e nao consegui achar o ''div...'' voce poderia me dar alguma indicaçao de mais ou menos que palavra eh perto flor?

      ResponderExcluir
    37. Não consegui achar o Div Id '' Pode me ajudar ?

      ResponderExcluir
    38. Olaaaaaaaaaaaa ,Ufaaa ,conseguiii colokar o menuu DOREII. Quebrei a cabeça mas deu certo. Obg

      ResponderExcluir
    39. A primeira parte está ok. Mas, não consegui achar o <div id='content-wrapper' (Meu blog é de duas colunas), para colocar a segunda parte.
      Pode me ajudar?

      ResponderExcluir
    40. Olá,
      Tudo bem?
      Estou com uma dúvida muito grande para postagens em menus do flash vortex, eu realizo as postagens no meu blogspot com os marcadores, porém ele não aparece nos links.. por exemplo: eu quero postar um livro eu faço a marcação para livros, mas ele não fica anexado no menu. Qual a melhor maneira para eu proceder! TENHO URGENCIA NISSO... PORFAVOR ME RETORNE!
      Obrigado!

      ResponderExcluir
    41. Deu um erro aki

      Eu aumentei o html fiz bem maior o menu

      Mas agora so posso clicar em um pedaço de um menu

      e tbm só consigo acessar a pagina do lado e nao as outras...

      ResponderExcluir
    42. Aah, eu não consegui =(
      Alguem me ajudaaaa

      ResponderExcluir
    43. Nao entendi nada, e nao axei akele codigo pra cola o outro. Alguem me ajuda?

      ResponderExcluir
    44. Mas como assim? Que kinks do meu blog eu coloco la no Vortex?

      ResponderExcluir
      Respostas
      1. link das paginas ex do meu : cartoonemacao.blogspot.com/p/cine-cartoon.html
        ai vc coloca o seu
        entedeu?
        acesse meu blog e divirta-se!

        Excluir
    45. oi vc poderia me ajudar? eu tentei colocar o menu horizontal no meu blog atraves de um outro site,mas não deu certo agora tem um monte de codigos em cima do meu cabeçalho.como eu faço pra retirar?
      obrigada

      ResponderExcluir
    46. Novidades, faça o seguinte:

      Copie a primeira linha do código que está aparecendo em seu blog (clicando no botão esquerdo de seu mouse e arrastando sobre todo o código)
      Agora vá até o HTML do blog(onde vc colocou o código), clique na tecla F3 de seu teclado, ao abrir uma pequena janela, cole o código nela e mande procurar. Aí é só apagar. Repita a operação até ter apagado tudo. Espero ter ajudado. Beijos.

      ResponderExcluir
    47. Por favor me ajude eu não acho o segundo codigo no meu template, como faço

      ResponderExcluir
    48. Ahh, muito obrigado! :D Ajudou muito mesmo. Beijos.

      ResponderExcluir
    49. Por favor me ajude pois nao consigo eu acho aquele negocio no texto mais depois nao consigo fazer mais nada por favor da uma olhada .
      Bjs

      ResponderExcluir
    50. Nao estou achando < div id='header-wrapper'>

      ResponderExcluir
    51. Ficou perfeito, parabéns pela postagem!!!!

      ResponderExcluir
    52. não estou conseguindo fazer. No meu blog não existe o código content-wrapper. Não tem. Então como que faço ?

      ResponderExcluir
    53. Vlwww mim ajudou bastante, sucessos!!!

      ResponderExcluir
    54. alguem me ajudaaaa eu baixai o meno do blogger e ja cxolokei no meu blogger agora nao sei modificar para quanndo vc clikar ir para a pagina que vc quer me ajudem pf

      ResponderExcluir
    55. Respostas
      1. Fia a tutorial. Veja: http://templateseacessorios.blogspot.com.br/2012/10/colocar-menu-em-cima-ou-embaixo-do.html

        Excluir

    A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


    Copyright © Templates e Acessórios |
    Design by Elke di Barros | Tecnologia do Blogger
      Twitter Facebook Google + YouTube