28/08/2011

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.  

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.

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345