29 de dez de 2012

Menu Tracks

Olá anjos!

Vocês se lembram do Menu Tracks? Esse menu a Kaori usou em um dos seus Templates, e foi o mesmo que eu coloquei no Template Violeta. Bom, para ninguém ter problema na hora de editar o menu do Template, resolvi reblogar o tutorial. Acho que assim fica muito mais fácil, pois eu sempre demoro a achar o tutorial do menu no Kawaii World

Pessoalmente não gosto muito desse menu porque ele fica fixo no topo do blog, e eu sempre acabo clicando nele sem querer. Para pessoas que não são burras que nem eu ele fica lindo, e vale a pena usar. Chega de enrolação e vamos ao tutorial.
Veja um preview clicando aqui (menu no topo do Template).


1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

</head>

Acima disso, cole:

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

Entendendo o código:

Link da sua Faixinha - Troque pela url da faixa que vai descer. O tamanho será de 110 x 90.

width: 110px; height: 90px - Caso você queira outro tamanho de faixinha, é aí que você vai mudar.

color: #fff  - Cor da fonte.

#4c2222 - Cor da sombra.



2-Procure por </header> e cole abaixo da tag:


<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='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>

<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
<li><a href='COLOQUE O LINK AQUI'>NOME DO LINK</a></li>
</ul>
</div> </div>


Entendendo o código:

background: #b7e2f8 - Cor do fundo do menu.

Algumas faixas (todas do Kawaii World):




5 comentários:

  1. Já usei o menu uma vez, é muito lindo.
    Seu layout -novo?- está muito perfecto e, adorei o jeito que vc fez a imagem de ilustração!


    Beijos !!

    ResponderExcluir
    Respostas
    1. Ahh obrigada Lucy!

      Que bom ver você de novo *-*

      Excluir
  2. Mari , ensina como editar ele no Layout Violeta :( não estou conseguindo :((

    Beijão

    http://cha-de-glitter.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Você quer editar as cores ou os links? Se for os links é só procurar por e editar onde está escrito "coloque o link aqui" e "nome do link". [tira os * porque não posso colocar codigo nos comentarios]

      Se for mudar as cores é só procurar por e achar o código igual está na postagem. Qualquer coisa procure o link da faixinha, que é esse: http://i.imgur.com/caj0U.png

      Qualquer dúvida me pergunta ok?

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!