Tutorial - Menu Tracks

Boa tarde.
Antes de tudo, queria agradecer a vocês. O blog está crescendo cada vez mais, e sempre a favor de vocês.
Estou em épocas de provas e meu tempo está sendo curto ate de mais, não estou tendo tempo para fazer o que tenho que fazer, e só estou estudando por 3 horinhas para as provas. Mas se vocês soubessem a satisfação e alegria que tenho ao chegar aqui e ver comentários,requests,selinhos e críticas constutivas.. Apenas isso que está me dando forças para continuar.Minha vida está assim: Pc-escola-natação-pc-escola-natação..Está muito puxado e espero que entendam.

Bom, tive mais um pedido na ask para tutorial.É muito bom saber que estão participando dos nossos posts. Me pediram o tutorial do menu Tracks, que é o menu que uso aqui no blog, que você passa o mouse em cima de uma palavra e uma faixinha desce, é mágica *o*.

Vamos ao tutorial, como sempre não é complicado, mas prestem muita atenção ^^'

~Enjoy !

Primeiro, pesquise por </head>, no seu html, e abaixo, cole isso:

<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 'Audiowide'; 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> 

Depois, modifique o que achar que realmente precisa, além da parte " LINK DA SUA FAIXINHA "

Após fazer isso, pesquise por </header> e cole isso:

<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='link1.blogspot.com'>Link1</a></li> <li><a href='link2.blogspot.com'>Link2</a></li> <li><a href='link3.blogspot.com'>Link3</a></li> <li><a href='link4.blogspot.com'>Link4</a></li> <li><a href='link5.blogspot.com'>Link5</a></li> <li><a href='link6.blogspot.com'>Link6</a></li> <li><a href='link7.blogspot.com'>Link7</a></li> <li><a href='creditos.blogspot.com'>Créditos</a></li> </ul> </div> </div>  

Acho que o código já fala por si só, modifique o 

<li><a href='link1.blogspot.com'>Link1</a></li> - Depois de a href=' insere-se o link. e antes de </a> o nome que vai aparecer

É facil,né ? 

Infelizmente meu tempo está sendo curto para postar faixinhas, mas caso achem realmente preciso, avisem-me e postarei.

Beijos.
( Créditos )