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.
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
paulo realmente tu é um genio,valeu pela dica,existem blogs que não tao nem aí pros outros,valew pela ajuda…
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!
muito legal
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?
OTIMO POST! foi mto útil, agora… só uma pergunta: vc ensinou há um pouco tempo atras como colokr nuvens de tag usando marcadores https://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
Muito bom, parabens
@janine:
http://templateseacessorios.blogspot.com/2008/10/nuvem-de-tags-em-flash.html
@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;
'
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
@Willian
Sim vai ter mais matérias. E é muito complicado pegar um site montado e transferir os códigos do Blogger.
ótimo tutorial do menu!
Eu já conhecia vários tipos sites que geram menu em css.
Abraços. Flws…
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!
não consegui fazer, me ajude.
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í.
@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. =[
Que tipo de link eu teria que colar no menu ?
Nao tem como ser textos? Orkut ?
Gostei muito das dicas. 😀
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?
E porque todos os posts que eu faço as palavras ficam centralizadas sem eu querer?
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
http://www.bombadoida.blogspot.com olhe como ficou
como resolvo?
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
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
Ola me desculpe,fiz uma pergunta anteriormente,mas já consegui a resposta.
Não cansarei de parabenizá-los
Usei um template e n achei esse codigo mesmo clicando ctrl+f, portanto, me ajudem se puderem.
Desde ja agradeço.
não tô achando esse código não!!
ajuda ai, quero muito um menu!!
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?
É,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
@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.
Cara funciona mesmo!!Gostei!!!Valeu
aleluia alguém coloco um menu q funcionasse
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 🙂
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.
muito legal sua página, super 10, mas eu tb dei Ctrl+F e naum consegui localizar o código…. buaaa
parabéns foi o tutorial mais claro sobre o tema que ja encontrei.
Paulo, porque a minha navbar (ou algo assim) quando eu coloco o código dela, ela fica acima da header?
Grato.
Nossa apanhei mas consegui….rsrsrsrs…..se quiser dar uma olhada meu blog é http://lorielisandra.blogspot.com/