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:
Ai adorei! Vou tentar por no meu blog *-*
Beijoos!
www.seatrevendo.blogspot.com
Mt tri kk!
Estava pensando se gostaria de se afiliar comigo?
Akie esta meu link,espero sua resposta!
editionromeuejulieta.blogspot.com.br
Lindo o menu! Para mudar a fonte, tenta usar.
color: #000000;
Beeeeijos
#Nhaaac >>>http://the-lovers-official.blogspot.com/
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
*Muito legal o tuto ,com certeza vou usar no meu outro layout!
#Nhaac --> http://day-princess.blogspot.com.br/
Seguindo,segue de volta?
http://blog-dremsofgirls.blogspot.com
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á!! ;)
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
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
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
Nossa, muito bom o tuto, é bem simples mas o resultado fica perfeito né? Amei amei
http://newsdayoff.blogspot.com.br/
ah qe pena jaque queria de outra cor,mas tá bom.
Vou postar lá no blog com os créditos.
bjs
www.jademarlla.tk
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/
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
Postar um comentário