Tutorial: Menu Tacks (Igual ao do DK)


Oi Minhas Fofuras !
Gostaram do novo nome do blog e das mudanças? 
Mais aguardem porque vem mais surpresas por aqui!
Bom, desde que mudei o novo Layout, algumas pessoas me perguntaram 
como colocava o menu igual ao do blog. Eu Acho realmente esse menu muito perfeito

Para quem ficou boiando, o menu é esse aki:



Primeiramente quero deixar todos os créditos ao Kawaii World, foi lá onde aprendi
Então Vamos ao Tutorial:

 1º Vá no seu HTML e procure por </head> e cole abaixo dele, o seguinte 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>
 2º Agora procure por </header> e quando achar cole depois dele o código abaixo:

<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>
Pronto, fácil né?
Espero que tenham gostado do tutorial e qualquer duvida deixe nos comentários
Só para avisar acho que vocês perceberam que eu ativei a Ask aqui no blog, então 
fiquem a vontade para mandar sugestão ou pedidos de post!

7 comentários:

  1. ateeeeeeeeeeeeeeeeeee q enfim achei um blog q fala desse menu
    amei,amei ameeei
    (Clica no meu nome e vá ao meu perfil)
    Seguindo aquiie

    ResponderExcluir
  2. Oie amr muito lindo seu blog ! Postagens super legais , e ja estou seguindo ( claro >< ) se puder da uma passadinha no meu blog e seguir de volta agradeço !
    Bjoos!
    http://cherryice-2012.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Flor !
      Vou dar uma olhadinha no seu blog
      beijos :*

      Excluir
  3. Heyy linda amei o blog...muito lindo
    Beijinhos
    Amo Chiclete(visita no perfil)

    ResponderExcluir
  4. Adorei , vou tentar no mu próximo templante :)
    http://comentariosde1garotaqualquer.blogspot.com.br/

    ResponderExcluir
  5. Andava á procura deste menu á mto tempo!
    bjs
    bpblogdepapel.blogspot.pt

    ResponderExcluir

Obrigado pelo seu Comentário! :)

- Comentarios do tipo Criticas e Sugestões são aceitos
- Pense antes de escrever alguma ofensa
- Leio, respondo e retribuo os comentários, mas da forma que merecer
- Comentários anônimos estão bloqueados