08 julho 2012

Tutorizando - menu bloom


Oi pessoas lindas de my heart ! Vocês estão bem? Eu estou bem, graças a Deus ninguém perguntou. Antes de começar o tutorial, queria pedir um favorzinho muito importante pra vocês. 

O Cris Collection fez uma parceria com a loja Cappuccine Store! Visitem lá, a loja é muito perfeita, tem aquelas blusas que você vê as garotas de foto de tumblr usando. Eu me apaixonei por todas u.u E vocês repararam o banner aqui na sidebar né? Então, o favor é pedir que vocês cliquem nele, porque depois de 150 pessoas diferentes clicarem, o blog ganhará coisas pra investir, aqui, pra vocês ><


Bom, voltando ao tutorial ~  hoje eu vim ensinar a fazer o menu bloom (bloom significa florescer, quis fazer uma homenagem aos meus leitores, que fizeram meu blog florescer e eu estar aqui hoje). O menu é assim:


Ele muda de um link pro outro em efeito fade, e mesmo sendo simples, fui eu que fiz então pra mim tá perfeito u.u Agora vá em design > editar HTML > Ctrl+f e procure por ]]> . ACIMA dessa tag cole o seguinte código:


/* Início do menu bloom por Cris - Cris Collection */
.menubloom {
text-align: center;
background: #fff;
border-bottom : 1px dashed #c0c0c0;
-webkit-transition:1s
}
.menubloom:hover {
background: #4f5494;
-webkit-transition:1s
}
/* Fim do menu bloom - Não retire os créditos! */


Vamos editar:

text-align:center; é o alinhamento do texto, no caso aqui está no centro, mude pra right se quiser na direita, ou para left se quiser que o texto fique na esquerda.

border-bottom: 1px dashed #c0c0c0; é o tamanho, estilo e a cor da borda; mude dashed pra solid (linha reta) ou para dotted (linha pontilhada).

-webkit-transition:1s é a duraçao do fade; quanto maior, mais lento.

background é a cor do fundo;

Agora adicione um gadget HTML/JavaScript e cole
E só esclarecendo uma dúvida que a Marcella teve. Ela me perguntou: "mas Cris, por que você não colocou o código text-color?" É porque não importa e não adianta colocar, a cor do link vai ser exatamente aquele do resto do blog. Eu já testei, e posso afirmar. Então é isso meus lindjos! Beijos.

15 comentários:

Bianca Araújo disse...

Ai adorei! Vou tentar por no meu blog *-*

Beijoos!

www.seatrevendo.blogspot.com

Yasmim disse...

Mt tri kk!
Estava pensando se gostaria de se afiliar comigo?
Akie esta meu link,espero sua resposta!
editionromeuejulieta.blogspot.com.br

Lary Yah disse...

Lindo o menu! Para mudar a fonte, tenta usar.

color: #000000;


Beeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/

Viih *----* disse...

Lindo esse menu!!! *--*

Sabe, seu blog é incrível! Muito bom mesmo. Já estou seguindo. Se você gostar do meu, siga! Saiba que estou te esperando querida!

Beijos!
www.stylistme.com

Lili disse...

*Muito legal o tuto ,com certeza vou usar no meu outro layout!

#Nhaac --> http://day-princess.blogspot.com.br/

Maah M. disse...

Seguindo,segue de volta?

http://blog-dremsofgirls.blogspot.com

Waleska Silva disse...

Lindo o menu *---*

Eeei, tá tendo concurso lá no Poréns e Etc's! Quero te convidadar a participar!! Link do Concurso! Te espero lá!! ;)

Smely disse...

Oii Cris! :3 Tudo bem? Já visitei a página da Cappuccine do seu blog.. Você pode visitar a página no meu? Desde já, obg flor!
http://cherrycupcaskull.blogspot.com

x. Rafaella W. disse...

Ah, pode deixar que vou clicar na imagem :B O menu fica lindo, vou salvar nos meus favoritos, e com certeza, usarei *-*

~ farryteen.blogspot.com

Por trás do rímel disse...

Ai nossa adorei eu tava procurando esse tuto a um tempo.

O ptr está no seu 1° sorteio de um lindo colar, vamos participar?
http://portrasdorimel.blogspot.com.br/2012/07/sorteio-colar-asas-de-anjo.html

Newsdayoff disse...

Nossa, muito bom o tuto, é bem simples mas o resultado fica perfeito né? Amei amei


http://newsdayoff.blogspot.com.br/

Camila disse...
Este comentário foi removido pelo autor.
Marcella/Mall-sama/Kanzinha disse...

ah qe pena jaque queria de outra cor,mas tá bom.
Vou postar lá no blog com os créditos.

bjs

www.jademarlla.tk

Lais Raquel disse...

Bom que da até vontade de comentar aqui 4 vezes,eu vou tentar usar no meu novo lay :).
selinho para você la no meu blog

http://girlycute.blogspot.com.br/

Juh Demos disse...

aaaaaamei seu blog muuuito lindo *---* Parabéns :DDDDDD to seguindo =*
esse tutu é muito legal to pensando seriamente em usar kkkk


http://simplesmenteassimj.blogspot.com.br