segunda-feira, 23 de janeiro de 2012

Como por menu de folinhas

Olá meus anjinhos! Tudo bem? Eu estou bem. A pedido de varias leitoras irei ensinar como colocar o menu de folinhas igual ao do BM. Eu aprendi o tutorial no Bomba de Glitter, então os devidos crêditos a Sunny.
1- Vá em Design -> Editar HTML -> Aperte CTRL+ F ou F3 e pesquise por:
]]></b:skin>

2- Acima de ]]></b:skin> cole o seguinde código:
/*---Início do Menu com Efeito by Bomba de Glitter---*/
bdg {
font-family: tahoma; /* Fonte do Menu */
width: 17%; /* Tamanho do Menu */
float: left;
background:#8EE5EE; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 0px 9px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}

bdg:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu com Efeito by Bomba de Glitter---*/



Agora modifique o código como quiser(Tabela de cores).
Para usar o efeito coloque este código onde você quer que apareça:
<a href="Link"><bdg>Nome</bdg></a>

55 comentários:

  1. Ótimo tutorial , o BDG é lindo kk' como aqui também , beijos :* Giih!

    By:Merry Rose

    algodaodoce.tk

    ResponderExcluir
  2. Oi, obg pelo tutu, já pus no blog!!!

    ResponderExcluir
  3. demiselenablog-oficial.blogspot.com

    ResponderExcluir
  4. ótimo tutorial bem explicadinho
    é bem útil e lindo né
    Ah te convido a participar do meu primeiro concurso lá no blog por favor participe conto com sua presença
    http://wwwstartyley.blogspot.com/2012/01/concurso-meu-blog-merece.html
    bjoos

    ResponderExcluir
  5. Nossa, adorei! Hahaha, vc arraza nos tutos :b

    bjs
    bnascimentooo.net.tc

    ResponderExcluir
  6. Amei o tutorial. Tenho um selinho lá no blog para voçê se açeitar. :) Beijinhos.
    Vanessa
    http://wwwforevercutecom.blogspot.com/

    ResponderExcluir
  7. awn valeu Giih! vc é mt fofa hahahha :3
    ah, e sobre o lay (nao quero ficar te cobrando, é só pra saber msm...) quando q fica pronto tudo? *-* shaus

    bjs

    ResponderExcluir
  8. Ainw to nos leitores divos *u*
    Giih,eu botei aquele treco da seta é fácil,eu aprendi no Extras Place Fame,topo com efeito desliszante :)
    Espero ter ajudado *o*

    Bj babado,Izzy.

    http://tutoriar.tk

    ResponderExcluir
  9. Ai flor não tenho tempo pra poder te avisar, me procura la para março...to vendo mais algumas empresas aqui para ter parcerias...

    Beijinhoooos

    www.universoglam.com

    ResponderExcluir
  10. Ameii o Tutorial *-*
    1º Concurso do blog, olha lá!
    Beijos ;*
    just-a-girl21.blogspot.com

    ResponderExcluir
  11. Gente, que graça esse tutorial, com certeza vai ser super útil <3
    http://senhoritaliberdade.blogspot.com/

    ResponderExcluir
  12. ooi , maie as dicas seguindo seu blog segue o meu?
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  13. Adorei a dica, acho que vou usar no meu blog. Seu blog é muito fofo!
    Eu to na segunda etapa do concurso trechy teen, e queria pedir sua ajuda
    http://s2meh.blogspot.com/p/parcerias.html
    vote em exagerada e inconstante.
    Desde já, obrigada.
    Beijinhos e continue assim, seu blog vai longe menina!

    ResponderExcluir
  14. Adoro os seus tutoriais!!beijosss
    www.cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  15. Conheço este tutorial ele é muito bom ainda bem que vc postou (;
    visita? ou segue? http://chamando-atencao.blogspot.com/ tem novo post la se quiser comenta http://chamando-atencao.blogspot.com/2012/01/all-star-voce-usa.html#comment-form Agradeço (; Jhessy

    ResponderExcluir
  16. aaaaaawn adorei, obg
    ah obrigada pela visita lá no blog, ode voltar sempre que quiser, ok? bjks, Nícia.

    ResponderExcluir
  17. Sou nova nesse meio e to tentando fazer um menu a meses e não consigo...pprincipalmente esse de folhinhas...me ajudem se puder...bjks

    http://ila-maria.blogspot.com/

    ResponderExcluir
  18. ah, fica muito lindo *-*
    especialmente pelo efeito de quando passa o mouse em cima !!!

    amei!

    beijos mil :*

    http://la--lullaby.blogspot.com/

    ResponderExcluir
  19. VALEU! Personalizei o meu, já! Mas, please, please! Juro que não quero ser chata nem te magoar, sério! É que estou desesperada atrás do tuto que eu te pedi! Não quero ser chata, mas quando fizer, eu juuuro que faço qualquer coisa por vc! Beeeijos!

    bibiworldfun.blogspot.com

    ResponderExcluir
  20. Oii, amei o tuto.Mas não vou colocar lá no blog porque já coloquei um menu.
    Beijoos!
    blogarotasdopredio.blogspot.com

    ResponderExcluir
  21. Obrigada pela presença no Embalaço ^^
    Novo post:
    http://www.embalaco.blogspot.com/2012/01/ficha-2-emma-watson.html

    Adorei o tutorial, simplesmente tudo o que eu quis... mas por enquanto vou deixar o meu...

    ResponderExcluir
  22. Nossa adorei a dica tanto quanto adorei o blog! Você faz excelentes tutoriais!

    Porque gostei do blog, e também para ajudá-la na sua meta de 2.000 seguidores, estou seguindo.

    Dá uma passadinha depois no meu, se for possível?


    Beijos
    Tudo4Girls
    http://tudo4girls.blogspot.com

    ResponderExcluir
  23. Adorei o tutorial , muito bom! adoro seus tutoriais, posso fazer um pedido? como fazer para colocar afiliados no blog. Mil bjs!

    http://teensfashionblog.blogspot.com/

    ResponderExcluir
  24. Oi adorei seu blog, muito cute, muito liiindo. Amei, serio :)
    Kisses, Gabriella
    http://perpink.blogspot.com

    ResponderExcluir
  25. Oi!
    Adr esse blog, e já sigo ele!
    Vcs aceitam fazer parceria com o meu blog?!
    Se aceitarem, respondam pf no meu blog, em Link-me!
    O site do meu blog é esse: http://nicole-falaserio.blogspot.com
    Vou adr se aceitarem!
    Bjos...

    ResponderExcluir
  26. Ótimo tutorial!! AUmei!! :)

    Lambjs da Nina!!!

    ResponderExcluir
  27. ótimo tutorial flor <3
    Bjo
    TDiaryofteens.blogspot.com

    ResponderExcluir
  28. Este menu é muito fofo..
    tenho ele ja no meu blogger
    http://express-tutoriais.blogspot.com
    Bjs,
    Céeh

    ResponderExcluir
  29. Gi pq o meu não deu certo?
    Mudandodetemaofficial.blogspot.com

    ResponderExcluir
  30. Oi!Sou Danininha,criei um blog a pouco tempo(ontem),queria pedir parceiria,pode?
    Meu link:http://sweetstar-blog.blogspot.com/
    Se sim,comenta no meu blog e me coloca nas parceirias,que coloco você!
    Beijokinhas!;P!

    ResponderExcluir
  31. adore! olha tem selinho lá no blog pra vc!!! faz uma visitinha!!!e pega seu selinho!kkk...

    ResponderExcluir
  32. Que legal, esse menu é mt mt lindo. Talvez eu use no próximo lay *o*
    Te espero lá, bjbj
    http://cabidemoderno.blogspot.com/

    ResponderExcluir
  33. Adorei , eu amo esse menu e muito cute e simples
    http://perfeitinha-blog.blogspot.com/

    ResponderExcluir
  34. Bacana o tutorial :)

    Dá uma passada lá no meu blog (http://www.agirlaplanet.com) se tiver tempo tem dois sorteios muito legais, de uma sapatilha e escolher qualquer acessorio na loja Eu Quero Store!
    <3

    ResponderExcluir
  35. Tô amando seu blog, tem dicas ótimas. Você pode seguir o meu, por favor?


    http://pretty-teenage-dream.blogspot.com/

    ResponderExcluir
  36. oi gii
    tem concurso lá no blog quer participar?
    www.lelly-imaginary-world.blogspot.com

    ResponderExcluir
  37. Ah gostei do tutorial , muito util agora quando eu quiser por sombra no titulo de maneira facil eu sei onde encontrar . bjjs
    http://www.diariodas-meninas.blogspot.com/

    ResponderExcluir
  38. Mt legal o tuto!
    http://cantoseencantosdahellen.blogspot.com/

    ResponderExcluir
  39. oi giiih adorei seu blog,ele é super cute, estou começando no blog agora e seus tutoriais estão me ajudando de montão, ja estou seguindo, segui tbn fofis ?
    clicks2teen.blogspot.com

    ResponderExcluir
  40. adooorei, vou ver se uso no meu proximo lay, é otimo !
    aaaaaaaamei os cursoresssss!
    http://garotadoolharsincero.blogpsot.com

    ResponderExcluir
  41. adooorei, vou ver se uso no meu proximo lay, é otimo !
    aaaaaaaamei os cursoresssss!
    http://garotadoolharsincero.blogpsot.com

    ResponderExcluir
  42. Eu adoooro esse menu,mas nunca consigo fazer,poderia me ajudar, talvez até mesmo colocar lá no meu blog?Beijos!
    mycrazycrazythings.blogspot.com/

    ResponderExcluir
  43. gih tava loka loka atraz desse menu!!!me ajudou muito esse tuto!!ja coloquei la no meu blog!!

    Bjs!

    http://gaarota-independente.blogspot.com

    ResponderExcluir
  44. Onde eu coloco? Não sei onde me ajudem
    www.interphotoscape.blogspot.com

    ResponderExcluir
  45. não certei colocar ;/ mais eé mt diwo http://princesinhafalsaoficial.blogspot.com.br/

    ResponderExcluir
  46. Eu não consegui, quando eu coloquei deu uma coisa cheia de negocios escritos :(

    ResponderExcluir
  47. Eu não sei fazer eu não entendi o último passo

    ResponderExcluir
  48. ooi meninas amei esse blog,e usei algumas dicas dele e fico super fofo... gte segue meu blog,comece a pouco tempo espero que gostem :* bjuus http://coisas-de-garotas-franciely.blogspot.com.br

    ResponderExcluir