Maratona de Tutoriais : Menu Tracks + Faixinhas

Kon'nichiwa, minhas borboletas como estão? Eu tô bem!

Eu não postei nada para a nossa maratona, somente a Gaby, queria pedir para as outras postadoras postarem, afinal para quem não sabia que também pode, ou então uma maratona de utilitários, vocês que sabem, depende.. É vocês leitores, estão preparados, para esse layout que vai ser disponibilizado? ~hyoo~ Talvez amanhã eu poste, mais eu queria mesmo era postar depois do novo layout, que tá dando uma preguiça. 

Agora para ver se eu para de falar, eu vou trazer o trazer um menu muito fofo, acho que já viram em algum blog mais não custa nada postar para quem não sabe, esse menu fica no topo ao você passar o mouse uma faixinha desce do menu, e fica bem fofo.. Eu não coloquei ele no blog de testes, pois a falta de tempo me atenta.. Também trouxe faixinhas para o menu e blá. Mais agora vamos lá?

~Enjoy~

1. Vá em Modelo > Editar HTML > Prosseguir > Tecle CTRL+F > E procure por </head> > 

2. Quando achar cole ''Abaixo'' o código:

<style type='text/css'>ul#nav { width: 1500px; margin: 0 auto; text-align: center !important; overflow: hidden;}

ul#nav li {float: left; list-style: none; align: center;}

ul#nav li a{display: block; width: 110px; height: 90px; padding: 20px 0 0 0; margin-right: 30px; margin-left: 5px; font: bold 17px &#39;Audiowide&#39;; text-transform: uppercase; color: #fff !important; text-shadow: 0 1px 3px #636161; text-decoration: none; background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

ul#nav li a:hover { background: url(LINK DA SUA FAIXINHA) 0 0 no-repeat;color: #eee9d9; text-shadow: 0 2px 3px #4c2222; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

ul#nav li a.js:hover {background: url(LINK DA SUA FAIXINHA) 0 -149px no-repeat; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}

</style>

Explicação: Em ''LINK DA SUA FAIXINHA'' Coloque o URL dela, veja algumas faixinhas no final do post.
3. Agora procure por </header> e cole depois dele esse código:

<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #b7e2f8; position: fixed; left: 0px; text-align: center; '>
<div style='position: absolute; top: -15px; width: 900px; text-align: center !important; float: center !important; '>
 <ul id='nav'>
  <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
  <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
  <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 <li><a href='LINK AQUI'>NOME DA PÁGINA</a></li>
 </ul>
</div> </div>

Explicação: Mude só oque está em maiusculo.

Faixinhas para você colocar:

Créditos: CC(Cupcake de Chocolate)