Menu no topo do blog

Tadaima :)

Este menu popularizou-se bastante quando surgiu a moda dos blogs de ícones, onde se excluía a barra lateral e portanto o menu era colocado no topo do blog. Também ficou conhecido como "menu navbar". É simples de fazer, não ocupa gadgets desnecessários, e eu tentei acompanha-lo de explicações rápidas, para o personalizarem mais facilmente. Podem visualizar, por exemplo, no topo deste meu blog de testes: www

Imagens daqui: www

Procure Por:

</head>

Cole abaixo o código seguinte e substitua os nomes e os links:

<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
<li><a href='Link' title='Texto da tooltip'> Nome </a></li>
</ul></div></div>

Agora, procure por:

/b:skin

Acima cole:

@Font-face {font-family: "silkscreen"; src: url ('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }

.bar_top { / * Fundo da barrinha do menu* /

width: 100%;

height: 30px;

background: #CORDABARRINHA;

border-bottom: 5px solid #f4d998;

}

.menu_barrax {

float: center;

margin: 0px;

padding: 0px;

}

.li menu_barrax {

float: left;

list-style: none;

font-size: 10px;

font-family: silkscreen;

text-transform: uppercase;

margin: 0px 0px 0px 10px;

padding: 0px 0px 0px 9px;

text-shadow: 0px 0px 1px #CORDASOMBRA;

}

.menu_barrax li a { / * palavrinhas * /

background: #CORDOFUNDO;

padding: 10px;

color: #CORDAFONTE;

text-decoration: none;

-webkit-transition-duration: 0.50s;

}

.menu_barrax li a:hover {/ * palavrinhas ao passar o rato * /

text-decoration: none;

color: #CORDAFONTEHOVER;

text-shadow: 0px 0px 1px #CORDASOMBRA;

background: #CORDOFUNDOHOVER;

-webkit-transition-duration: 0.50s;

}

.transit {

-webkit-transition-duration: 0.50s;

}

.bar_topd {

width: 900px;

margin: 0px auto;

}

É isto, espero que seja útil.