Menu no Topo: Tracks [001]

-drwmania.tumblr.com-

Olá venho trazer mais um tutu para vocês my bombonzitos!!! Hoje trago um menu no topo do blog, conhecido como "Menu Tracks". Eu achei ele no blog Kawaii World. Ele e super fofo e vale muito a pena usar. Se esta em busca de um menu para layouts suaves ele é perfeito. Abaixo você pode ver o menu em uma brevia.  

Sem Brevia

1.

Vá em Painel >> Tema >> Editar HTML. Dentro do HTML use Ctrl+F e na barra que abrir cole </head>, assim que achar, cole o código abaixo dele:

Códigos

<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: #ffffff !important; text-shadow: 0 1px 3px #7B04B9; text-decoration: none; background: url(URL DA IMAGEM) 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(URL DA IMAGEM) 0 0 no-repeat;color: #E4D9EE; text-shadow: 0 2px 3px #4c2225; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

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

 </style>

2. Ainda dentro do HTML; Agora procure por </header> em seu HTML e depois dele cole esse código:

Códigos

<div style='top: 0px; height: 30px; width: 100%; z-index: 4; background: #7C029A 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'>URL</a></li>

  <li><a href='link2.blogspot.com'>URL</a></li>

<li><a href='link3.blogspot.com'>URL</a></li>

<li><a href='link4.blogspot.com'>URL</a></li>

  <li><a href='link5.blogspot.com'>URL</a></li>

<li><a href='link6.blogspot.com'>URL</a></li>

<li><a href='link7.blogspot.com'>URL</a></li>

</ul></div> </div>

◤Entendendo o código◥

• width: 110px; & height: 90px;  - Tamanho e altura

• color: #fffffff a cor da fonte - Cor da fonte

• 0 2px 3px #F38EFF - Cor da sombra do texto.

• background: #7C029A - Cor do fundo do menu

• Sobre o código aqui.