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:

Julia. disse...

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

Leeh 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 :\

Duda Albuquerque disse...

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

Clay *o* 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/

Paloma Morais disse...

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

Natália disse...

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

Nool, problem? 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

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

. drihramos disse...

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

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

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

Bruna Bizzi 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 Guerra disse...

Muito lindo o menu, adorei!

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

David - Garoto Nerd 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

Chassy Cher disse...

Que fofinho ^^
Você sempre arrasa no HTML.

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

Isabela Godoy - Delírios de Garota 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/

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

♕Brendinha Silva Brito ♕ disse...

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

http://crazygirl-original.blogspot.com

Julia Rocha | Be you,be happy 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

It Teen 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 disse...

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

http://saladadefrutasbr.blogspot.com.br

Fefe disse...

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

A.Carollyne disse...

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

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

Paloma Morais disse...

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

Meia Noite e Quinze 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

Rebeca:) 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

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

Susana 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

Belieber In Action disse...

Ameeeeei!. Já to usando . Bjs!

Carlinha 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