19 de set de 2012

Tutorial: menu fluid


Olá! Trouxe pra vocês um tutorial bem legalzinho. Sabe aquele menu que está lá no topo do blog? Pois é, hoje vou ensinar como se faz um menu daqueles. O tutorial é bem simples e ão tem nada de muito difícil, é só prestar atenção para não colocar o código errado. Bom, vamos ao que interessa:

Bom, primeiro vá em "modelo" e clique em "editar HTML" aperte Ctrl+f e perquise por /head. Assim que achar, em cima dele cole esse código:
Feito isso procure por ]]> e acima dele cole esse código:

Faça as alterações necessárias e se quiser use essa tabela de cores aqui, depois salve. Vá em layout, adicione um novo gadget HTML e na aba que abrir cole esse código aqui:
<div id="menudisplay">
<ul id="menufluid">
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
</ul>
</div>

Agora é só visualizar e ver se está tudo certo. Se estiver é só salvar e pronto! Gostaram?

14 comentários:

  1. Que bom que postou esse tutorial *-* É bem legal esse efeito da descrição, vou testar mais tarde haha!

    Beijos :3
    quinzedilemas.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou Tah! Depois me diz se funcionou ok?

      Excluir
  2. Adorei, fica super bonitinho! Até que não é tão difícil como eu pensava...

    Beijos, Namji *¨¨*
    plushrepublic.blogspot.com

    ResponderExcluir
  3. Fica uma belezinha, muito legal!
    ~ Beijinhos,
    Bruh
    #Garota da Lua

    ResponderExcluir
  4. esse menu é muito foda!
    fica tipo tumblr, bem legal. tô criando um layout novo pro AG e acho que vou usar ele, por ser bem pequeno!
    Beijo!
    http://ahasagata.blogspot.com.br

    ResponderExcluir
  5. Fica muito fofo esse efeito *-*
    Bjin ♥. [clica no perfil pra ir pro PG *3*]

    ResponderExcluir
  6. Super útil o tutorial e o menu é super fofo!

    Garota Differente

    ResponderExcluir
  7. Ótimo tutorial, tive que favoritar -.-
    Você advinhou, pois quando entrei no seu blog já pensei em pedir um tuto de como se faz aquele menu *-------*
    Amei o blog, muito lindo, seguindo aqui ^^

    Beijinhos~~> http://paradisecityoficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oooinnw que linda! Eu tenho tipo poderes psíquicos sabe? shuashua ... tô seguindo seu blog também!

      Excluir
  8. Oii amr *-*
    rsrs,fico muuito FEEEEEEELIIIZZZ ,que você goste do meu blog,aiin muuito obrigada ,mesmo!
    Emfim# ,seu blog,é um amr *-*,eu super que amei!
    Beijinhos,boa sorte com essa vida!
    karenselajaalmiron . blogspot . com . br

    ResponderExcluir
    Respostas
    1. De nada flor, eu que agradeço pelos elogios ^^ Boa sorte com a vida tbm rsrs

      Excluir
  9. Que bacana o tutorial !
    Ameeiiiiii ............
    Em breve tento fazer, hehehe :)
    Seguindo !
    Bjus
    - fashionlookdesign.blogspot.com

    ResponderExcluir
    Respostas
    1. *--* quando fizer me fala que eu vou correndo ver o resultado ok? Seguindo vc também...

      Excluir