quarta-feira, 1 de agosto de 2012

Tutorial: Menu horizontal simples

387607_303572346333199_556737432_n_large
Hooy gente  hoje eu vou ensinar vocês a fazer um menu horizontal simples (como vocês leram no título) muito bonitinho, usando apenas o CSS, então imaginem como é simples! Aaah quem quiser pode ver um preview clicando aqui. (Antes que alguém pergunte é um blog de testes pro template que eu fiz para o blog da Ana Paula).

Cole o código abaixo acima de 
.menu {width: 100px; font-size: 25px;  font-family:'Stars From Our Eyes'; color: #fff;float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }

.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}

/** Fonte personalizada **/
@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;}
Salve e no local que você quer que apareça o menu cole o código abaixo:

                                                      

Dúvidas, comente! Aah... Gente não estranhem essa semana ver vários posts de tutoriais aqui no JD. O motivo é que eu quero dar uma repaginada na página de goodies. Se alguém quiser fazer um pedido especifico aproveite 

67 comentários :

  1. Olá Jackie, menina estou completamente sem tempo pra poder fazer o menu do blog, mas adorei o Tuto..adoro seu blog..super ajuda nós leitoras! Beijos lindona!
    http://universodajujubah.blogspot.com.br

    ResponderExcluir
  2. Que fofuxo :) simples mas bem bonito!

    bjãoo

    ResponderExcluir
  3. Legal o menu Jackie! Já que você está fazendo tutos, vou deixar aqui minha pergunta. Como você fez pra deixar o gadget de pesquisa e o "me encontre" diferente dos outros gadgets? Eles tem fundo diferente. Ensina a fazer isso?

    ResponderExcluir
  4. Muito legal , uso um no meu blog mais o código é diferente.

    Beijos,
    Camila Angelina
    http://cantinhodacaps.blogspot.com.br (agora com TEMPLATE ANIMADO COMEMORATIVO de 1 ano do blog)

    ResponderExcluir
  5. jackie como vc feiz a galeria de fotos no gadget ??

    ResponderExcluir
  6. Passando pra te avisar Jackie de mudar a url do blog agora é www.jipeblo.com, assim entra mais rapido.
    OK linda adorei a nova idéia de novos goodies.

    ResponderExcluir
  7. Que lindooo *u* ameiii vou tentar usa em algum design meu =]

    #bezoos~~> perfeitosmile.blogspot.com

    ResponderExcluir
  8. OMG, que simples... *o*.. É muito fácil de fazer..
    E fica um resultado super lindo..

    Beijo Grande, Guriia

    ResponderExcluir
  9. Como fazer esse efeito do gadget Galeria de Fotos?

    Beijos :)
    cupcakeofshine.blogspot.com

    ResponderExcluir
  10. Ótimo tutorial, estou mesmo precisando arrumaro menu lá no blog pois fui tentar fazer um aí mas não deu certo, e você também não tem muitos tutorial de menu aqui né.
    Eu estava procurando um tutorial de divisórias para a barra lateral, se você tiver um pra me indicar ;) Tem também da borda da parte de postagem como nuvens...

    http://desenhodadisney.blogspot.com.br/

    ResponderExcluir
  11. BOM! Já que é pra fazer pedido de tutorial rs', eu queria saber como você fez esse slide da "Galeria de fotos" aqui do lado... Preciso muito de tuto, e agradeceria se você me mandasse! ;]
    Beijos, te espero lá.

    www.soentreamigas15.blogspot.com

    ResponderExcluir
  12. Oii Jackie!! Queria pedir pleaseee se você pode colocar um tuto de como colocar cabeçalho, é fácil, eu já fiz e talz, só que eu queria um tuto de cabeçalho grande que ocupe toda a largura do template sem ter que alterar a largura dos posts, já tentei mas não consigo fazer isso!! :( Desde já agradeço!! Bjoos

    http://agarotadocachecolrosa.blogspot.com.br/

    ResponderExcluir
  13. Linda, Eu estava falando do top parceiros, só pra me ajudar na minha meta.. ,

    ResponderExcluir
  14. Realmente Jackie, eu já estaava começando a estranhar tantos tutus aki no seu blog, rsrs.
    O tutorial é bem explicado, entendi tudinho, mas por mais que eu tentasse colocar ñ ia então eu desisti.
    Tem Vota Dogs Lá no Blog.
    sooscachorrinhos.blogspot.com
    Kissus, linda.

    ResponderExcluir
  15. Ficou muito lindinho menu que se meche :D
    Beijiiinhos

    ResponderExcluir
  16. Ótimo tuto Jackie! ;) Precisava de um tuto de menu simples assim qdo fiz meu layout + ñ encontrei,agora fica pra próxima rs

    http://www.meianoitebr.com/

    ResponderExcluir
  17. Que massa! Adorei *OO*
    http://jelly-belza.blogspot.com.br/

    ResponderExcluir
  18. jackie qual e o progama que vc usa para fazer o seu temblante ????? me respode porfavor

    http://teen-dream-s2.blogspot.com.br/

    ResponderExcluir
  19. UUUUUUH gosti
    Já sei qual menu vai ser o do meu futuro blog e-e q
    Ah logo logo te mando o email da entrevista ;)

    ResponderExcluir
  20. Heeeeeeeeeeeeey jackie ja vou aproveitar e pedir um tutu xD amei o novo estilo dos goodies'-'
    va sabe no blog da rafaah vaz? aquelas duas coisas vermelhas e pretas acima do lay? pode ensinar a fazer?
    bgd jackie beijinhos :b
    http://xicablog.blogspot.pt

    ResponderExcluir
  21. Adorei o tutorial, ajudou muito !

    http://a-sweet-coconut.blogspot.com.br/

    ResponderExcluir
  22. Adorei esse menu jackie!estava procurando,e o seu menu de goodies ta cada vez mais organizado e lindo e cheio de conteúdo!Parabéns e obrigada por me escolher lá no fã clube para aparecer lá no extra obrigada Jackiee!http://brilhants.blogspot.com.br/

    ResponderExcluir
  23. Amei o tutu, mas já estou com meu menu! Talvez no prox. lay, né? Bjus!

    www.meujeitoblog.blogspot.com

    ResponderExcluir
  24. Ah eu queria saber como por esses emoticons no texto da postagem.

    http://renata-diariodeumaadolecente.blogspot.com.br/

    ResponderExcluir
  25. Aiii Jackie! Como você consegue escrever daquele jeito? Quando eu coloco gifs nos meus posts, eles ficam com um espaço enorme entre ele e a palavra, e sem falar que o texto não fica certinho, fica um espaço muito feio nele, olha um exemplo: http://eeproibido.blogspot.com.br/2012/07/saia-da-era-html-entre-para-era-stiqr.html

    Vou agradecer de joelhos se puder me ajudar, mas desde então obg flor, bjoooos!

    http://eeproibido.blogspot.com.br

    ResponderExcluir
  26. Seu blog é mt lindo adorei aqui!
    bjs:*
    http://blogandocomtatah.blogspot.com.br/

    ResponderExcluir
  27. Jackie eu adorei o post achei super interessante o menu eu não sabia fazer e agora eu aprendi vou fazer em breve no meu blog.. Bom sobre tutoriais gostaria de aprender como vc personalizou a foto com a caixa de pesquisa..
    Beeijos
    http://fikaaqui.blogspot.com.br/

    ResponderExcluir
  28. Nossa Jackie muito bom tutorial, só não vou uasr pois já fiz um novo lay :).
    Gostaria de convidar todos a participar do divulgando e do A voz do leitor, acessem já

    http://blogandoseuassunto.blogspot.com.br/ :h:

    ResponderExcluir
  29. Que blog lindo , não conhecia aqui , mas agora virei aqui toda hora viciei , uashaus , beijos!

    http://adolescentesdooposto.blogspot.com.br/

    ResponderExcluir
  30. Adoreei o tutu!! Suuper fofo o menu >.<
    Amore, aproveitando pra pedir um tutu, faz um mini guia do photoscape??
    Bezoos --> My Candy Space

    ResponderExcluir
  31. Adorei o tutorial e ele é muito fácil, talvez eu use no próximo layout do blog :)

    Beijos
    http://mundo-doce-delicioso.blogspot.com.br/

    ResponderExcluir
  32. É um menu bem simples, mas muito fofinho. Gostei! *-*
    Hey Jackie, tu podia fazer um tutorial sobre PhotoFiltre ou PhotoScape, gosto dos tutoriais de editores de imagem que você faz. São bem bacanas.

    Beijoquinhas pra ti ;*

    ResponderExcluir
  33. Jackie linda,

    Eu queira um tutorial para colocar este slide de foto no widjet do blog. Achei tao fofo e como quero tirar umas fotinhos, iria amar. Acho que ia ser sucesso. Beijos

    ResponderExcluir
  34. @Vanhttp://isjackiezzdream.blogspot.com.br/2011/06/galeria-de-imagens.html

    ResponderExcluir
  35. Jackie, estou com uma dúvida e talvez você possa me responder...
    Quando personalizo o título do post a personalização fica só na página inicial, quando clico fica preto e sem personalização o título... Dae procurei vários blogs para perguntar como fazer e percebi que muitos também têm isso, e vi que o seu não tem... Como fazemos para tirar isso?

    ResponderExcluir
  36. Hooy Jackie,
    Boom eeu coonseguii coloocar oo menuu no meeu bloog, maas gostariaa de sabeer coomo see colooca uuma pagiina, poor exemploo coomo a sua pagina de goodies , faz tempoq eu estou procurandoem tudo quanto é bloog maais não acho, vocc poderiaa me ajudaar ??

    Beijoos, Teeh / Just one Girl

    http://just-one-girl.blogspot.com.br/

    ResponderExcluir
  37. Amei o tuto *-*
    Segue meu blog por favor,to seguindo devolta:
    Minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  38. só tem uma coisa: como colocar mais opções?? só aparece a opção "Home"

    ResponderExcluir
    Respostas
    1. enquanto mais links vc quiser é só repetir o último código trocando a palavra home por outra palavra que queira, por exemplo:

      FAQ, goodies...

      Excluir
  39. Seu blog é simplesmente muito original...Parabéns...

    Espero sua visita e presença no meu humilde Blog.
    http://jonathanejonathan.blogspot.com.br/
    Se for de bom grado siga no face também.

    Abraços
    Caio J.

    ResponderExcluir
  40. Jackie o meu não funcionou não mudou nadinha

    ResponderExcluir
  41. Como assim onde você quer que apareça? :'( (Sou burra)

    ResponderExcluir
    Respostas
    1. Tipo vc vai colocar o código onde quer o menu.
      (Em HTML java script).

      P.S Eu não entendi direito sua dúvida :c
      caso esteja com dificuldade em algo especifico é só falar que eu explico melhor tá?

      Beijus!

      Excluir
    2. onde que eu vo colar o código tipo quero o menu la em cima no lugar dele abaixo do cabeçalho mas onde enfio esse codigo hahaha ai to pirando aki haha

      Excluir
    3. aqui >> http://mundoblogger.com.br/wp-content/uploads/2010/09/adicionar-gadget-abaixo-header-blogger.jpg

      Excluir
    4. o meu n tem adc gadget sem ser na barra lateral : /

      Excluir
    5. Mas não precisa!
      É só vc adicionar na barra lateral e arrastar até lá, entendeu?

      Excluir
  42. Ficou muito pequeno o que eu faço? o código grande onde eu colo? e como faço pra postar as coisas dentro de cada área do menu?Me ajuuuude!

    ResponderExcluir
    Respostas
    1. É só aumentar o número da font-size...
      Já o código grande eu expliquei onde colar no post.

      Sua última dúvida ficou meia vaga (?) não entendi direito...

      Excluir
  43. Muito bom o tuto,eu adorei...
    mas onde que fica para mudar a cor das letras no estado normal e no hover?
    não consegui achar no código :/
    vc pode me ajudar?
    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
    Respostas
    1. Acho que no caso desse menu as cores dependem da qual vc já utiliza no seu template ;D

      Excluir
  44. :( Eu ia fazer mais é incrive o por que de eu nunca achar aquele codigo... não é que eu apaguei ele... por que eu ja criei outro blog de testes e ainda assim nao achei esse codigo ]]> .... To maguada... Bjuus

    Sonhos da little girl

    ResponderExcluir
  45. olah como faço para mudar a fonte e deixa-la mais simples?

    ResponderExcluir
    Respostas
    1. http://isjackiezzdream.blogspot.com.br/2012/04/instalando-fontes-diferentes-no-blog.html

      Excluir
  46. muito legal seu blog, parabéns! usei o menu, visita quando tiver tempo http://siteblogit.blogspot.com.br/

    ResponderExcluir
  47. como faço para subir mais ele pelo html, ja esta embaixo do cabeçalho, so que não esta na barrinha que eu coloquei para ele aparecer em cima, e ja aumentei o font size, so que não fez nada.

    ResponderExcluir
  48. Por favor, me ajuda :( Não consigo colocar no meu blog... :/

    www.amoraoprimeirorimel.com

    ResponderExcluir
    Respostas
    1. Posso tentar te ajudar, mas preciso saber qual é sua duvida?!

      Excluir

  49. Olá, como se faz menu com imagem? como o seu.
    (Camiila.oliveira@hotmail.com)

    ResponderExcluir
  50. Gente estou com muita dificuldade para fazer alguém me ajuda?

    ResponderExcluir
  51. Como faco p mudar a posicao do menu? eu quero ele mais p esquerda!! me ajuda por favor =(

    ResponderExcluir

.