28/08/2011

Tutorial: Menu Tracks (Topo do Blog)

||
-drwmania.tumblr.com-

Mais um tutu para vocês my bombonzitos!!! Desta vez e o menu conhecido como "Menu Tracks". Eu o achei no blog Kawaii World. Ele e super fofo e vale a pena usar.
Dentro do seu HTML procure por </head> assim que oh achar, cole o codigo a baixo após dele.

<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>

 Agora procure por </header> em seu HTML e depois dele cole esse codigo:

<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 melhor:

1º Parte do codigo

width: 110px; height: 90px e onde você ira mudar o tamanho, caso deseje outro tamanho de faixa

uppercase; color: #fffffff a cor da fonte

0 2px 3px #F38EFF cor da sombra do texto

2º Parte do codigo

background: #7C029A Esse ser cor do fundo do menu

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram