Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1490554969
Vida do cache: 1490814169
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Criando um template

Fazendo seu template – Parte 3 – Adicionando um Menu Horizontal

Antes de mais nada, quero pedir desculpas mais uma vez, estou meio ausente do blog e principalmente do Twitter, problemas pessoais e escola. Paciência. =/

Agora vamos continuar com mais uma parte da nossa seria “Fazendo seu Template”. É hora de adicionarmos um menu superior no template, isso ajuda muito na navegação interna de seu blog. Os leitores agradecem…

1º – Entre em “Layout” -> “Editar HTML”.

2º – Procure (Ctrl + f):

<div id='header-wrapper'>
</div>

Adicione logo depois:

<div id='front_menu'>
<li><a class='s' href='URL DO SEU BLOG' title='Início'><span>Início</span></a></li>
<li><a class='s' href='#' title='Sobre'><span>Sobre</span></a></li>
<li><a class='s' href='#' title='Vídeos'><span>Vídeos</span></a></li>
<li><a class='s' href='#' title='Contato'><span>Contato</span></a></li>
</div>

Isso que você acabou de adicionar é o menu, vamos editar o conteúdo do menu e depois aplicar os estilos.

É bem simples configurar, troque URL DO SEU BLOG pelo link do seu blog.
As outras opções é só trocar # pelo link e os nomes (Sobre, Vídeos, Contato...) substitua por aquilo que você quiser nomear.

Se você não quiser alguma das opções é só apagar de <li> a </li>. E para adicionar mais uma opção, é só duplicar uma das opções e editar o conteúdo.

3º – Vamos colocar o estilo do menu. Procure (Ctrl + f): ]]></b:skin>

Adicione ANTES desse código, o seguinte CSS:

#front_menu {
float:left;
overflow:hidden;
position:relative;
text-transform:uppercase;
width: 100%;
background: #c1c1c1;
}
#front_menu li {
float:left;
padding: 5px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-right:4px;
}
* html #front_menu li {
display:inline;
}
#front_menu li a {
background:transparent;
color:#0960a3;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size: 12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:700;
line-height:26px;
padding-left:15px;
text-decoration:none;
}
#front_menu li a span {
background:transparent ;
display:block;
line-height:24px;
padding-right:15px;
}
#front_menu a {}
#front_menu a:hover{
color: #489ddf;
background-position:left bottom;
}
#front_menu li a.s {
background-position:left bottom;
}
#front_menu li a:hover span, #front_menu li a.s span {
background-position:right bottom;
}

No estilo: #front_menu { você vai editar o fundo do menu, no lugar de background adicione o código da cor desejada, ou adicione uma imagem. Para substituir a cor por uma imagem use:

background: CÓDIGO COR url() no-repeat;
ou
background: url() repeat;

Leia mais sobre como colocar uma imagem com CSS clicando aqui.

No estilo: #front_menu li a { faça as mudanças nas letras, cores, tudo sobre a parte escrita do menu.
Lembrando:
color:#0960a3; é a cor da letra.

As outras mudanças depende do gosto de cada um, seja curioso, apague, modifique e aprenda o que cada coisa significa.

Apos fazer as modificações, teste e salve.

Obs.: Você pode adicionar outro tipo de menu, existe vários e vários sites que trabalham só com menu CSS, procure no Google por "Menu CSS". Se quiser uma dica: CSS Menu Maker, um ótimo gerador de menu. Lembre-se de hospedar as imagens do menu e substituir onde necessário no CSS do menu.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

36 Comentários

  1. Sec2Info disse:

    Muito bom este tutorial!
    Recentemente eu "chupinhei" um template de vocês (deixei os créditos, nada mais justo, vocês merecem).
    Seguinte, gostaria de perguntar se você sabe como fazer menus automáticos rotativos (tipo aqueles menus em flash da página inicial do UOL e do IG).
    Se puder, entre em contato.
    Grande abraço

  2. FaGnEr disse:

    paulo realmente tu é um genio,valeu pela dica,existem blogs que não tao nem aí pros outros,valew pela ajuda…

  3. William Hamon disse:

    Muito show as suas dicas, eu tenho alguma dificuldade ainda em entender algumas coisas, mas estou concguindo seguir perfeitamente o seus ensinamentos!!
    Só queria saber 2 coisas:
    1) vai ter mais matérias sobre como criar templates??
    2) Minha ideia, é fazer um layout diferente, tipo fazer uma pagina no dreamwaver, com algumas paginas a mais, mas estou com dificuldade em saca a parada de Gadget, e entender como funciona o codigo da caixa de post.

    Abraços!

  4. Fabrizio Malta disse:

    muito legal

  5. Luciano disse:

    Muito bom mesmo, comecei a editar o template do meu blog nessa semana e peguei boa parte do conteúdo aqui nos seus tutoriais. Mas tenho uma dúvida, caso eu resolva montar um menu com imagens, terei de colocar dentro da tag <.li> a URL de todas as imagens?

  6. janine ribeiro disse:

    OTIMO POST! foi mto útil, agora… só uma pergunta: vc ensinou há um pouco tempo atras como colokr nuvens de tag usando marcadores http://www.codigosblog.com.br/2009/05/nuvem-de-tags-usando-os-marcadores.html mas, e pra ficar igual ao desse blog aqui http://nopiqueweb.blogspot.com/2009/08/almofadas-personalizadas.html sabe? ensina aê!=D

  7. Leonardo disse:

    Muito bom, parabens

  8. Paulo Estevão disse:

    @Luciano, depende de como você quer trabalhar, tem várias formas de colocar uma imagem no menu. Pode colocar uma imagem no li também:
    li
    style='
    background:URL DA IMAGEM;
    '

  9. henrique menna disse:

    muito tri seu blog, bem legal, mesmo, vou ate segui ele, parabns continua assim ta,e quando de da uma olhada no meu blog ta ok!
    http://henrique199.blogspot.com

  10. Paulo Estevão disse:

    @Willian
    Sim vai ter mais matérias. E é muito complicado pegar um site montado e transferir os códigos do Blogger.

  11. Neto disse:

    ótimo tutorial do menu!

    Eu já conhecia vários tipos sites que geram menu em css.

    Abraços. Flws…

  12. SignorinaBohns disse:

    Olá Paulo!
    Amei o seu blog!

    Mas estou confusa em uma coisa: o menu é horizontal ou vertical? Pois segui e fiz todos os paços para colacar esse menu e, no final, o menu ficou na vertical! -.-"

    Tens como me dar uma ajudinha?

    Grandes abraços!

  13. Minhas Pesquisas disse:

    não consegui fazer, me ajude.

  14. Diego Concer disse:

    Opa Paulo, excelente blog e excelente tutorial.

    Poderia me auxiliar em uma coisa?

    http://www.universecv.com

    Gostaria de expandir (estender) a tela, que nem o seu e a maioria dos blogs.
    Como faço?

    Obrigado.

    Um abraço e tudo de bom aí.

  15. Paulo Estevão disse:

    @Diego,
    leia todas as postagens da série. Você vai entender como fazer.

    @Signorina,
    Horizonta, alguma parte do css do menu você não colocou. =[

  16. (: disse:

    Que tipo de link eu teria que colar no menu ?
    Nao tem como ser textos? Orkut ?

    Gostei muito das dicas. 😀

  17. CarelPinheiro disse:

    Paulo,eu gostaria de colocar mais um item no menu exemplo, o meu ta assim:

    Inicio/Dicas/Templates/Contato

    gostaria que ficasse assim : Inicio/Dicas/Templates/Outros/Contato

    com faço?

  18. CarelPinheiro disse:

    E porque todos os posts que eu faço as palavras ficam centralizadas sem eu querer?

  19. Renan disse:

    Com certeza esse foi o melhor post sobre a criação de menus que eu ja li,
    Além disso me ajudou a encontrar outros sites que criam menu além do flashvortex…
    Valeu mesmo!

    http://ares-br.blogspot.com

  20. †µℓเ๏๏ .†.קαiм- disse:

    http://www.bombadoida.blogspot.com olhe como ficou
    como resolvo?

  21. webdicass disse:

    Paulo ,eu tentei colocar em meu blog uma explicação parecida com a sua ,só que quando salvo a postagem atrapalha toda a pagina,como faço para colocar códigos nas postagens ?
    meu email: sheila-nicoli@hotmail.com

  22. ricktarcha-blogdodesabafo disse:

    OLA,BOA NOITE!1
    Fiz tudo direitinho e deu certo,o menu apareceu e tudo mais,como sou iniciante só fiquei com uma dúvida,desculpe se for besteira!!!
    Mas como acrescento o conteúdo ao menu,pois qdo se clica nele só volta a pagina inicial!!
    Desde já agradeço

  23. ricktarcha-blogdodesabafo disse:

    Ola me desculpe,fiz uma pergunta anteriormente,mas já consegui a resposta.

    Não cansarei de parabenizá-los

  24. GD disse:

    Usei um template e n achei esse codigo mesmo clicando ctrl+f, portanto, me ajudem se puderem.
    Desde ja agradeço.

  25. Jo Harvelle disse:

    não tô achando esse código não!!
    ajuda ai, quero muito um menu!!

  26. Karine Chagas disse:

    Consegui fazer o menu porém não sei como lincar os posts a eles…como faço?
    Será que já teve um tutorial nesse sentido?

  27. Jéh - disse:

    É,realmente,apesar de ser uma série muitissimo boa,tem alguma coisa errada no menu,ele não fica na horizontal de jeito nenhum.Que tal vc mesmo fazer um teste Paulo? porque colocar os links e tal,dá tudo certo,só que o código a seguir,que eu imagino que seja pra horizontalizar,já que sem ele o menu fica na vertical,sempre que é colocado,dá erro,e o blogger traz uma mensagem de que os elemtnso não foram fechados corretamente.
    Uma pena mesmo,estou tentando á uma semana já.

    Se puder,mande-me um email querido; mamaedalaura2007@hotmail.com

  28. Paulo Estevão disse:

    @Jeh
    Colocou o código CSS? Pois eu testei tudo!

    @Karine,
    Coloque o link do post no lugar indicado.

    @Jo,
    Se o template for o mesmo que estou editando é impossível não ter o código.

  29. Arthur disse:

    Cara funciona mesmo!!Gostei!!!Valeu
    aleluia alguém coloco um menu q funcionasse

  30. - disse:

    Muito obrigada pelo seu tutorial e parabéns!
    Porém eu tenho uma dúvida. Como o de outras pessoas o meu meu também não aparece na horizontal, mas não é só isso, o menu em si não aparece, aparecem apenas os link's mas sem o menu mesmo. Gostaria que pudesse me ajudar, pois fiquei meio desanimada depois disso.
    Obrigada 🙂

  31. Rickzinhocps disse:

    Paulo, se você ainda olha os comentáris desse post, gostaria de saber como alinhar meu menu horizontal á área dos posts, por exemplo: O codigos blog tem aquele menu horizontal preto ali em cima que esta certinho no meio da página e do mesmo tamanho da área dos posts(não sei como chama rsrs)…O menu preto está alinhado junto com essa área branca aqui no codigos blog.
    É isso que eu adoraria saber como fazer !

    OBS: Me disculpe não saber explicar muito bem e ter confundido tudo, é que eu sou meio novato ainda !

    Abraços.

  32. CORSETS CHLOE disse:

    muito legal sua página, super 10, mas eu tb dei Ctrl+F e naum consegui localizar o código…. buaaa

  33. murilo alves disse:

    parabéns foi o tutorial mais claro sobre o tema que ja encontrei.

  34. Carel Pinheiro disse:

    Paulo, porque a minha navbar (ou algo assim) quando eu coloco o código dela, ela fica acima da header?

    Grato.

  35. Elisandra disse:

    Nossa apanhei mas consegui….rsrsrsrs…..se quiser dar uma olhada meu blog é http://lorielisandra.blogspot.com/

Para enviar seu comentário, preencha os campos abaixo:

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