Menu horizontal no topo do blog

Olá pessoas! Desculpem meu sumiço, mas é que tenho me preocupado com algumas coisas. Por enquanto não posso dizer nada, mas logo explico para vocês o que é. Isso tem a ver com uma prova que vou fazer domingo e outra que fiz domingo passado. Pois é, estou naquela época chata de tentar todos os vestibulares do mundo, afinal de contas, quero estudar bastante e arrumar um emprego que eu goste.

O tutorial de hoje é daquele menuzinho que a gente costuma usar em Templates estilo galeria, que fica no topo e é uma barrinha. Muita gente tem usado ele, mas como o Kawaii World está fechado (foi de lá que eu tirei, pelo menos) resolvi ensiná-lo aqui, já que esse menu é fofo demais e fica lindo em qualquer blog. Se eu não tivesse usado esse menu em cima da imagem, teria usado esse menu barrinha no lugar da cortininha, ficou lindo também.

Veja um preview do menu aqui.

1- No HTML do seu blog, procure por </head>, abaixo, cole:

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

2- Agora cole acima de ]]></b:skin>:

.bar_top {
width: 100%;
height: 31px;
background: #CORDABARRINHA;
Border-bottom: 10px none #F4D998;
}
.menu_barrax {
float: center;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #dddddd;
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #CORDASOMBRA;
}
.menu_barrax li a{
background: #CORDOFUNDODOMENU;
padding: 10px;
color: #CORDAFONTE;
text-decoration: none;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.menu_barrax li a:hover {
text-decoration: none;
color: #CORDAFONTEHOVER;
background: #CORDOFUNDODOMENUHOVER;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
text-shadow:0 1px #CORDASOMBRAHOVER;
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
}

Creio que não preciso explicar nada, já que o código é auto-explicativo.  Se alguém tiver alguma dúvida é só falar comigo que eu ajudo :)

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar