0

Menu Horizontal


Vamos aprender a colocar um menu horizontal no blog;
Vá em  Design - Html  e procure por:

/* 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;
}

Agora logo abaixo acrescente:

#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;
}

 Agora procure por:



<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>

Agora vamos colocar os links:

<div id='navigation'>
<ul>
<li><a href='inserir link do seu blog' title=''>link</a></li>
<li><a href='inserir link aqui' title=''>links</a></li>
<li><a href='inserir link aqui' title=''>links</a></li>
<li><a href='inserir link aqui' title=''>Links</a></li>
<li><a href='inserir link aqui' title=''>links</a></li>
<li><a href='inserir link aqui' title=''>linkss</a></li>
<li><a href='inserir link aqui' title=''>links</a></li>
<li><a href='inserir link aqui' title=''>links</a></li>

</ul>
</div>

Substitua a palavra Link pelo nome  que voce quer.







Cantinho Especial
Cantinho Especial

0 comentários:

Me trazem visitas


compartilhe no orkut

Loading

Tradutor


Post recentes

Últimos Comentários

Vamos conversar?


Minhas Músicas

!-- BEGIN CBOX - www.cbox.ws - v001 -->

Post