1ºA primeira parte do código deve ser colocada de preferência logo depois de tudo que se refere a header.Então vá até o codigo do seu template e procure pelo seguinte codigo:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#navigation{
height:40px;
width: 890px;
line-height:2.9em;
margin:-12px 10px 10px 5px;
background: url(ENDEREÇO DA SUA IMAGEM) repeat-x;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #787878;
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;
}
* html #navigation a {width:1%;}
#navigation .selected,#navigation a:hover{
background:#808080;
color:#000000;
text-decoration:none;
}
2ºAgora adicione o codigo em vermelho como mostra o exemplo acima.
3ºAgora vamos ao segundo codigo,encontre o seguinte trecho no codigo do seu template:
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a>
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='TPBB (Header)' type='Header'/>
</b:section>
</div>
<!-- Não esqueça de colocar aqui os seus links!!-->
<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>Home</a></li>
<li><a href='inserir link aqui' title=''>Artigos</a></li>
<li><a href='inserir link aqui' title=''>Fotos</a></li>
<li><a href='inserir link aqui' title=''>Links</a></li>
<li><a href='inserir link aqui' title=''>Forum</a></li>
<li><a href='inserir link aqui' title=''>Outros Sites</a></li>
<li><a href='inserir link aqui' title=''>FAQ</a></li>
<li><a href='inserir link aqui' title=''>Contato</a></li>
</ul>
</div>
4ºAdicione o codigo vermelho como aparece no exemplo acima.Onde esta 'insirir link aqui' é opnde você irá colocar os links.E as partes em amarelo do codigo acima você pode mudar de nome pelo que você quer que apareça.
Bom eras isso espero ter ajudado.
Fazendo um menu horizontal
Marcadores: TutoriaisPostado por Ev@dro às 06:17
Assinar:
Postar comentários (Atom)
4 comentários:
Muito legal seu blog Parabens!ja ate peguei o tradutor novo!
Estou querendo parceiria com vc!
Si vc quiser deixe um comentario no meu blog e logo em seguida estarei pondo vc!
Obrigado!
Aguardando a sua resposta.
seu blog é muito bom vey vc me ajuda muito
Como deixar o menu no centro do blog ?
Postar um comentário