Menu Horizontal no Blogger

Antes de nós começarmos, como sempre eu faço, recomendo fazer o backup do template do Blogger. Agora sim, podemos prosseguir com o nosso tutorial.

1. Entre no painel do Blogger, vá em Layout -> Editar HTML, e procure por ]]></b:skin> e abaixo desse código adicione:

#navigation{
height:30px;
width: 800px;
line-height:2.9em;
margin:0px auto 0px;
background-color:#FFFFFF
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #000000;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #000000;
}

#navigation .selected,#navigation a:hover{
background:#000000;
color:#FFFFFF;
text-decoration:none;
}
2. Para adicionar o menu abaixo do cabeçalho, adicione antes de:
<div id='header-wrapper'>
Este código:
<div id='navigation'><b:section class='navigation' id='navigation' showaddelement='yes'></b:section></div>

Salve as modificações. Agora vá em Layout -> Elementos de página, e veja se é possível adicionar um novo elemento abaixo do cabeçalho, se for possível, adicione o elemento lista de links e é só adicionar seus links.
Menu Horizontal no Blogger Menu Horizontal no Blogger Reviewed by Fabricio Araujo on 11:25:00 Rating: 5

6 comentários:

  1. Olá!
    Este exemplo serve pro template DownRight Blogger Theme v3.0?

    ResponderExcluir
  2. Luis Marcos Leite, isso serve para todos os templates do Blogger.

    ResponderExcluir
  3. Gostei bastante, funcionou! Já está no meu Blog!

    Valeu!

    www.blogdahebi.com.bt

    ResponderExcluir
  4. Dessa maneira o gadget ficou acima do cabeçalho, tive que colocar mais abaixo, embaixo do termino da inscrição do cabeçalho.
    Mas vlw, obrigado.

    ResponderExcluir
  5. Dessa maneira o gadget ficou acima do cabeçalho, tive que colocar mais abaixo, embaixo do termino da inscrição do cabeçalho.
    Mas vlw, obrigado.

    ResponderExcluir
  6. Olá!
    Este exemplo serve pro template DownRight Blogger Theme v3.0?

    ResponderExcluir

Adicione seu comentário nesse post.
- Receba a resposta por e-mail, clique em inscrever-se por e-mail.
- Não use palavras de baixo escalão.
- Quer mostrar seu blog? Use a opção Open ID.
- Se selecionar a opção Nome/URL na URL digite http:// na frente do endereço do seu blog.
- Quer falar somente com o Autor? Então clique Aqui.

Muito obrigado por sua visita e volte sempre!

Tecnologia do Blogger.