9 de mai. de 2012

Menu de gotinha

Tumblr_m2w4wynvd51qeyov3o1_500_large

Hello, famers! Estão bem? Hoje eu fiz um menu especialmente pra vocês. Na verdade, é o primeiro menu que eu faço, então me desculpem se não estiver tão bom assim. É um menu de gotinha, eu achei bem fofo. Ele tem o efeito hover (quando passa o mouse) bem suave, e as letras ficam com um espaço entre elas. Se estiver algo errado com ele, é só me avisar que eu arrumo. Não se esqueçam dos créditos :D


Aqui tem um print de como ficou o menu:


Super bonitinho, né? Podem perceber que quase todos os cantos são arredondados, exceto um, que é o que dá o efeito "gotinha". O efeito normal é esse que está com o fundo preto. E ao passar ao mouse, a cor muda suavemente e as letras ficam com um espacinho, como eu já disse. Se gostarem, o código é esse:
/*-Início Menu de Gotinha On The Fame-*/
mdg {
font-family: verdana; /* fonte do menu */
width: 20%; /* largura */
float: left; /* posicionamento do menu */
background: #000000; /* cor de fundo */
padding: 3px; /* altura */
text-align: center; /* posicionamento do texto */
margin: 2px; /* espaço */
-webkit-border-radius: 15px 15px 15px 0px; /* bordas */
-webkit-transition-duration: .90s; /* duração do efeito */
font-size: 08pt; /* tamanho da fonte */
color: #ffffff; /* cor da fonte */
letter-spacing: 0px; /* espaço das letras */
}
mdg:hover {
font-family: verdana; /* fonte do menu hover */
width: 20%; /* largura hover */
float: left; /* posicionamento do menu hover */
background: #e5e5e5; /* cor de fundo hover */
padding: 3px; /* altura hover */
text-align: center; /* posicionamento do texto hover */
margin: 2px; /* espaço hover */
-webkit-border-radius: 15px 15px 15px 0px; /* bordas hover */
-webkit-transition-duration: .90s; /* duração do efeito hover */
font-size: 08pt; /* tamanho da fonte hover */
color: #000000; /* cor da fonte hover */
letter-spacing: 3px; /* espaço das letras hover */
}
/*-Fim Menu de Gotinha On The Fame-*/

Percebam que tá tudo explicadinho no próprio código. Recomendo que só mecham no width, no background, no font-size e no color. Agora cole tudo acima de ]]></b:skin>, no seu HTML.  Logo depois, adicione um gadget de HTML/JavaScript e para cada link, cole:
<a href="LINK"><mdg>NOMEDOLINK</mdg></a>
Gostaram, amores? Espero que sim. Fiz com muito carinho pra vocês e a única coisa que eu peço é: use com créditos! Beijos enormes.

47 comentários:

Júlia disse...

Lindo menu!
Como se faz um menu? kk. Tá lindo, amei, se eu usa eu credito.
bjs

Letícia Carolina disse...

flor, como se faz um menu igualzinho o seu abaixo do cabeçalho? vejo isso em varios blogs, mais nenhum faz o tutu :\

amy disse...

Que lindinho *o*
Muito fofinho Dani,ah o OTF ta lindão,Parabéns
Beijos da Duda
www.plushbomb.tk

Hannah Mariah disse...

Eu acho a coisa mais linda esse menu cara, é mais boonito que o de folhinhas, super amei. Pena que não me dou muito bem com esses tipos de menu ¬¬' shaushaush,
Beijos!

Chocolate Frio -- Teenage Sky

Isa disse...

Amei!Amei!

http://caneca-magica.blogspot.com.br/

Anônimo disse...

Adorei, Dani! Super útil heim?
Beijos, momamoraes.blogspot.com :3

Natália disse...

Lindãaao
http://mundofantasticofeminino.blogspot.com/

Caroline Rodrigues disse...

Awn, que lindo o menu *u*

thefashionwonderland.blogspot.com

Rita ♥ disse...

que lindoooo *-* vou usar com certeza :)
Bjos, sweetgoodies.tk

Luly disse...

Awn, que coisa fofa! Dani, seu primeiro menu, ficou lindo lindo lindo! Eu só não vou usar agora porque a pouco tempo troquei o layout do meu blog e coloquei um menu que fica na barra lateral, mas no próximo design acho que vou usar, sempre creditando, claro (: Gostei muito mesmo, Dani. Beijos, the-zombie-attack.tk

Ste disse...

Adorei a dica, fiz no meu blog, foi muito útil *-*
http://quackzoom.blogspot.com.br/

Erica Byanca disse...

Super lindo e fofo o menu. Talvez quando eu mudar o layout de novo eu uso e claro que vou creditar o On The Fame :D. E que layout é esse Dani? Eu nem tinha visto a mudança, adorei. Os layouts do OTF são sempre divos *-* http://pretty-trash.blogspot.com.br/

dribs disse...

Bandida, amei o menu. Super fofin! *u*
http://pinkpimenta.blogspot.com.br/

. gaabii oliveira disse...

Amei o menu! *-*
Vou usar no meu próximo design.
Seguindo!
Bezos ;*
senhorita-insana.blogspot.com

Alan disse...

Adorei, vou testar no meu blog!
www.alanfelipej.blogspot.com

Stephanie Vieira disse...

oomg que menu mais perfect gente ameeei! tá lindo o OTF *___*
Stephanie ~~> Garota do Olhar Sincero *-*

duda marcelino disse...

Awwn, eu quero esse menu *-*

Dani, blog novo visita ?http://blogflyingdesign.blogspot.com.br/

Alex Band Brasil disse...

Oi!Amor amei o novo lay e o menu de gotinha sua linda!
^^
Tenha uma ótima sexta-feira!
Beijos!
Bruna
(http://casinhadasnozzles.blogspot.com/)

Nadine disse...

Muito lindo o menu, adorei!

http://depoisquecrescemos.blogspot.com.br/

David Costa disse...

o menu é lindo mesmo *O*

http://garotoonerd.blogspot.com.br

Garotos Modernos disse...

Nossa, achei seu blog muito lindo & interessante, mas vim te fazer uma proposta, da uma passada no meu blog e se gostar pode segui-lo e comenta-lo que logo farei o mesmo beijos...

elly disse...

ઇઉ adorei o post ✿◠‿◠✿
fique com Deus
boa tarde
tenho nova parceria =)
Bjinhoxx ✿◠‿◠)✿
/(.”)__☆
/||\
_||_
www.coisasdeladdy.com

Carol Oliveira disse...

Daaaaaaaaani, você voltou \o/
Poxa, fiquei muito feliz mesmo, viu? A blogosfera sem você e o OTF não são as mesmas.

Adorei o menu. E amei o layout novo também, ficou lindo.

Beijo,
muggle-world.blogspot.com

Mrs. California disse...

Que fofinho ^^
Você sempre arrasa no HTML.

http://blog-sweetpoison.blogspot.com/

Isabela Godoy disse...

Adoreei, Dani *-* Salvei nos favoritos p usar depois! Que bom que voltou, senti mt falta do OTF nesse tempo. <3
Beeijo (:
Sorteio com a Mulher de Fases | Delírios de Garota

Absolute Dream disse...

aaain, que tuto lindo >.<
tuto de menu é mto show (:
mas eu prefiro tuto na vertical .

http://mini-fofoquinhas.blogspot.com.br/

Alex Monteiro disse...

Com certeza usarei no meu próximo Lay, MUITO lindo *---*
Dani, sem problemas viiu Linda?
Beijão!
http://cantinhocomtudo.blogspot.com.br/

Unknown disse...

Que lindooo! Adorei o Tutu ♥ Flor, obrigada pela visita no meu blog, será sempre bem vinda! Adoreiiiii seu blog, parabéns *.* Estou seguindo. Um beijo.

http://candy-bruna.blogspot.com

Brenda Kwon 브렌 disse...

Eu quero Parceriia, floor ! Amo mt o seu Blog ! *---*

http://crazygirl-original.blogspot.com

Anônimo disse...

Dani liinda,possu te pedir um favor???você pode fazer um lay pra mim ou pelo menos uma base??tô precisando mtmtm.

Beijus
www.beyou-be-happy.blogspot.com

Gislaine Dias | Blog disse...

Ótimo tutorial, você explica bem e o menu fica lindo.
http://i-teenbr.net.tc

cacá disse...

Adoro seu blog e já o sigo. Queria parceria com você. Tenho certeza que não vai aceitar mas eu tou tentando pelo menos né ? Mas a esperança é a ultima que morre, pelo menos.
Sominhamusica.blogspot.com

Renata Viana disse...

Ai que lindo o seu blog .... super cute.. e o conteúdo esta super legal.. adorei

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

Saladadefrutasbr (saladadefrutasbr.blogspot.com) disse...

Dani, fica lindo o efeito vou usar no próximo layout do SDF,Disponibiliza um layout free amiga? '-'

http://saladadefrutasbr.blogspot.com.br

Anônimo disse...

Amei o tutorial <3
crystalbow.tk
Ps:O bllog tá lindo viu?

Anna Carollyne Oliveira disse...

O menu é lindo Dani, fica um mimo quando posto no blog *-*

http://www.world-cutest.blogspot.com.br/

Anônimo disse...

Dani, vem cá, como você colocou o hover nos links em negrito? Ficou lindo demais, fofa :3
momamoraes.blogspot.com

Fernanda Zucolotto disse...

Oi Dani, fiquei apaixonada pelo menu, sempre quis fazer um menu só meu e você conseguiu em, mas não é egoísta e decidiu repartir pra todo mundo, hahah. Eu adorei o nome "gotinha" e os efeitos são super fofos.

Fernanda, meianoiteequinze.tk

Unknown disse...

Nossa seu blog tá lindo;*
Adorei o tutorial,eu acho lindo esse tipo de menu!

http://conectadas2.blogspot.com.br/

thassy disse...

Oi, tudo bem?? Segue lá?? Aceita parceria??? Posso pedir sua ajuda para uma coisa?? Se você gostar de fanfic, se você souber o que é fanfic e tals, leia e me ajude a divulgar a minha fanfic?? Por favor??? Eu preciso muito da sua ajuda, eu faço qualquer coisa em troca, mas please, me ajude! Beijo xoxo

likeaamericangirl.blogspot.com

Anônimo disse...

Hey, Dani!
Adorei esse menu, uma fofura que só.
Poderia nos explicar como que faz essa navbar transparente com transição? Nhac. Obrigada, desde já. Beijos!

Su disse...

Amei a postagem, seu blog é perfect *--* parabéns !! Ah! eu peguei um ok? da menina e o urso, simplesmente me apaixonei por ele, rsrs!

www.fluffypoison.tk

Luana C. disse...

Ameeeeei!. Já to usando . Bjs!

Jobs News Brasil disse...

Amei, vou tentar fazer no meu blog hehe.
Já tô seguindo aqui.
bjss
http://coiisinhasdegarotass.blogspot.com.br/

Anônimo disse...

With the ability to actually alter the texture and condition of the hair with clever and fashion-forward hair styling products, Rusk Being products are sure to
intrigue the hair product lover in all of us. Before you go for them, try products
at Keranique for hair care. Both brands are popular in
known hair salons and spas.

My homepage: hair products

Anônimo disse...

Still the health concerns mar the overall positive sides of this economic growth as people take
their health problems as the cost of development which
is indeed pretty higher. Comb the excess oil through the dampened hair,
making sure to cover the ends of the hair. It only leaves
a lustrous sheath on the hair and gives it a beautiful
look rather and the greasy effect that is left by the usual hair oils.
1 The oil spill threatens the lives of birds, sea otters,
and more than 400 other species. Customers have always given
Moroccan Oil products the highest ratings.

Feel free to visit my homepage :: olive oil for hair

Anônimo disse...

Most of these senior citizens are not comfortable
with the use of internet or are incapable of visiting
the State Comptrollers office and thus for them newspaper listings does the job.
Clearly, however, newspapers need to try harder to take advantage of new technologies to tell their stories in ways that attract and involve readers, young or old.
Today, Most of newspapers are offering their online
editions. Some say it would have, because there
is an ongoing collaboration between the two groups in attacks on
Israel. Thats why Indian Hindi papers are very popular in all corners of India.



my weblog; click here