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

Menus Vanessa S.

Criar Menu Horizontal no blog

[alerta]Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima), ou templates modificados. Esta dica NÃO se aplica aos novos modelos criados em Designer de Modelo.
Se você estiver usando templates do “Designer de Modelo”, você deve seguir este tutorial:
[/alerta]

Salve o seu template antes de começar, clicando em “Baixar modelo completo”.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.

Aplicar estilos

1º Parte:
Vá em modelo>>Editar HTML, marque a opção “Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de ]]></b:skin>

#navigation{
height:30px;
width:auto;
position:relative;
line-height:2.9em;
margin:0px auto 0px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background: url(link da sua imagem) repeat-x;
}

#navigation li{
float:left;
display:block;
float:left;
margin:0;
pading:0;
}

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

#navigation li a:hover{
background:transparent url(endereço da sua imagem) repeat-x;
text-decoration:none;
}

Atenção: Modifique os valores de “width, margin, color” conforme o layout do seu template.

Vou explicar algumas coisas que podem ser modificadas:

Em #navigation
height:30px; -> Height é a altura que terá o menu
line-height:2.9em; -> Line-height é a altura da linha
margin:0 auto 0; -> Margin: este modo (auto) centraliza o menu na página
background: url(Endereço da Imagem) repeat-x; -> Background é o plano de fundo, que pode ser uma cor ou uma imagem.
Repeat-x faz a imagem se repetir horizontalmente.

Em #navigation li:
Altere os valores de ‘margin’ e padding’ de acordo com seu template.
Você pode incluir borda ao link, para isso, acrescente:
border-right:1px solid #787878; -> alterando a cor e espessura da borda.
Exemplo:Se quiser a borda só à direita = (right), esquerda = (left), topo = (top), ou base = (bottom).

Veja outros artigos que tratam sobre bordas:
Personalizando Bordas no Template
Bordas arredondadas

Em #navigation li a é onde você vai configurar toda a parte referente aos links do seu menu antes de passar o mouse em cima (tamanho da fonte, cor etc):

Em #navigation li a:hover que se determina cor dos links e background quando se passa o mouse por cima do link:
Se você quiser incluir uma imagem acrescente o endereço da sua imagem no espaço destacado entre parênteses:
background:transparent url(endereço da sua imagem) repeat-x;

Salve as modificações!

Se quiser, veja o artigo que trata sobre background para que você possa entender um pouco mais sobre como estipular o comportamento da sua imagem no background

Incluindo a lista de links no menu:

Agora que você já entendeu o que pode ser modificado, vamos a segunda parte do código:
Incluir uma lista de links no seu menu já criado.
Vá em modelo>>editar HTML (Não precisa Expandir modelos de widgets).
Para deixar o menu abaixo do cabeçalho, procure por:


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='NOME DO SEU BLOG (Header)' type='Header'/>
</b:section>
</div>

 

E cole este código logo abaixo:


<div id='navigation'>
 <ul>
<li><a expr:href='data:blog.homepageUrl' title=' Início'>Home</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 1</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 2</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 3</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 4</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 5</a></li>
<li><a href='inserir link aqui' title='Edit'>Link 6</a></li>
</ul>
</div>

 

Não se esqueça de inserir seus links na parte onde está escrito ‘inserir link aqui’ e acrescentar títulos aos seu links.

Visualize. Se estiver tudo certo salve as modificações.
Procure sempre ir visualizando antes de salvar para ver se tudo está configurado de acordo com o seu gosto, se estiver tudo ok: salve!

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.

22 Comentários

  1. .:: Nessa ::. disse:

    Naganuma:
    Temos um tutorial que ensina a criar bordas arredondadas com CSS3..dá uma olhada no indice de Tutoriais para Blogger e procura o link do tutorial.
    https://www.mundoblogger.com.br/2009/09/tutoriais-para-blogger-indice.html

  2. Naganuma disse:

    gostaria de saber como colocar bordas arredondadas em cada link porque separa-los eu consegui, mas colocar bordas arredondadas não vai.

    Desde já agradeço.

  3. mauro rocha disse:

    como se faz pra botar risquinhos entre as palavras do menu horizontal um rico pra separar as palavras

  4. Cherry disse:

    Bom dia Clau,
    depois de muito tentar consegui instalar…
    só tenho uma dúvida…como faço para que meus conteudos de postagens fiquem separados nas opções do menu?

  5. imaginium disse:

    Oi Clau, blz?!
    Tenho uma dúvida (e uma sugestão talvez):
    Como fazer para ficar selecionado o menu que está sendo exibido na página? Tentei de várias maneiras e nada!!!

    Por exemplo:
    O hover faz mudar a cor da fonte e background ao passar o mouse por cima, mas gostaria que continuasse na mesma cor do hover depois de clicado…

    Vlw… Abraço… Parabéns pelo MundoBlogger

  6. Dani Aquino disse:

    Olá, tem cmo vc me ajudar, to tentando colocar o menu no meu blog, mas o meu blog nao tem cabeçado, tem uma caixinha de pesquisa, ai qdo insiro no html ele fica lá em cima e nao consigo abaixar o menu.

  7. g?s?a??a ls?a?s disse:

    Oiii!! O seu menu ficou de mais no meu blog, o seu foi o único que deu certinho!!
    Vaaleu, beeijos, aah, visita o meu blog ? http://www.lovatobr.tk oou http://www.loveddl.blogspot.com

  8. .:: Clau ::. disse:

    ?FernandiiinhááH?
    Por padrão(geralmente) fica na parte "outer-wrapper, ou content-wrapper. Tenta achar se tem no seu template e altera o valor em width.
    Sobre deixar links etc, vc pode ler os Termos de Uso do Blog para saber como funciona nossa politica de comentários e pedidos de ajuda.

  9. ?FernandiiinhááH? disse:

    Oiii Clau desculpa realmente não fui bem clara ao explicar sobre o problema do meu template:
    então eu baixei um template(não deixo o link para ficar mais fácil por que realmente não sei se pode.Caso não houver nenhum problema para voce eu deixo mais acho que não pode) então Clau baixei o template e ele ficou parecendo com o seu um pouco largo porém o seu está muito bom afinal não esta muito largo como o meu bem o que eu queria saber é se existe algum código ou coisa parecida que altere as dimensões da largura para ficar mais fácil deixarei meu url na opção openID..

    DESCULPA TE INCOMODAR..Se voce não conseguir me ajudar te entenderei afinal não estou sendo bem clara…
    AGRADEÇO DESDE JÁ…

  10. .:: Clau ::. disse:

    FernandiiinhááH
    Não tenho como te ajudar, pois não há como eu saber sobre o seu template, até pq cada template se apresenta de maneira diferente um do outro, mas posso recomendar que vc dê uma lida no artigo: Elementos Básicos do Blogger e suas variáveis, a fim de entender um pouco sobre alguns códigos padrões e com isso tentar localizar ou descobrir sobre o que existe no seu template.

  11. ?FernandiiinhááH? disse:

    Oii clau eu amo o seu blog ele me ajuda muito!
    Bem o motivo do meu comentário não é apenas para elogia-la pelo trabalho,queria te pedir um favor se tiver como voce me ajuda ficaria muito agradecida,caso contrario lhe agradeceria da mesma forma!
    Então acontece que baixei um template da web.Queria saber se tem uma maneira de alterar a largura dele pois ficou muito largo e isso atrapalha não só a aparência do blog como também incomoda os visitantes.
    AGRADEÇO DESDE JÁ!

  12. We e Pes Edition's disse:

    não deu! não consegui colocar porque um 'tal' código não tinha!
    Poor faavoor Clau, se vc tiver um tempinho de sobra, faça um tema pro meu blog
    vlw

  13. Nandu disse:

    Primeiramente, Adorei o blog, nem tenho palavras para descrevelo, esta me ajudando muito, e concerteza servira quando eu crescer rsrs.

    Bom, o menu do meu blog ficou bem no meio do banner (que no caso esta como backgorund) queria colokar o pouquinho mais em baixo o menu, como posso decelo?

  14. Xbox360full disse:

    Hum
    obrigado por responder
    estou aprendendo algumas coisas logo consigo colocar mais esse menu
    mais uma vez obrigado 🙂

  15. ::Clau:: disse:

    @Xbox360full:
    Vc pode colocar sim, e pode inclusive usar a mesma formatação do q vc já tem, se quiser. Ou então escolhe um menu que vc queira.
    Cria um menu e nomeia ele como: Menu 2.
    No CSS ele seria:
    #menu2{
    Coloque os estilos
    }
    No html, a div seria:
    <div id='menu2'>
    ai basta instalar abaixo do cabeçalho.
    é questão de vc tentar, é apenas uma sugestão.

  16. Xbox360full disse:

    Olá,muito bom o seu blog
    gosto muito das suas dicas

    Queria lhe fazer uma pergunta,se tiver tempo para responde-la
    bom
    Meu site é esse http://www.xbox360full.com/

    O template,menus e tudo que esta nele foi eu mesmo que fiz
    Mas como pode ver,tem um menu acima do cabeçalho,eu queria colocar mais um menu so que abaixo do cabeçalho e com uma caixa de busca junto do menu

    se puder me ajudar fico grato 🙂

  17. compartilha disse:

    ola tira esses numeros pra facilitar na hora de copiar

  18. Elaine disse:

    Olá. Sou meio novata e meu template já tem os menus horizontais, mas não sei como faço para edita-los. como no seu a gente clica em cima evai para outra pagina, como faço isso e edito? Desculpe minha ignorancia mais nao consegui entender se eu faço postagem se tem q mudar algo para ir para uma página , eu coloquei alguns como home, perfil e gostaria q abrisse em outra página mas nçao consegui fazer. se puder me ajudar agradeço.

  19. Tinho disse:

    Valeu!
    Vou aguardar!!

  20. ::Clau:: disse:

    Tinho:
    Esses menus postados acima, são apenas horizontais…
    eu pretendo postar um tutorial ensinando a instalar menus verticais no blog…
    Aguarde q assim q der eu publico o tutorial..fica de olho sempre aqui…

    .::Clau::.

  21. Tinho disse:

    Oi!
    Desculpe minha ignorãncia…mas o que teria que mudar para fazer ele ficar vertical e onde colocar para ficar na sidebar?
    vlw!
    🙂

  22. ?Carla_Witch Princess? disse:

    Oi, Clau!
    Adorei os seus menus horizontais!
    Instalei um no meu blog…
    Ficou show!!!
    Adoro os seus tutoriais, amiga!
    Bjinhossssssss

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