Novo Layout: Egipto + Menu Cuddly
10:13
Oláá pessoal~~ Olhem só quem decidiu aparecer! Sim eu estou de volta, e ai vocês devem se perguntar o porquê, então eu vou explicar numa palavra Escola. Sim, essa desculpa de novo -.- . Ando cheia de Desenhos para acabar PowerPoints para fazer, testes para estudar e não tenho tido tempo nenhum mas eu prometo que farei pelo menos 1 post por semana :3 Mas em compensação fiz um layout com tema no Egipto porque eu sou fascinada por o Antigo Egito^^. Mas vamos parar com este blah blah blah e vamos lá!
[Preview]
1. abra o HTML aperte ctrl+f e procure por: ]]></b:skin> e acima coloque o seguinte código:
cuddly {margin-top: 8px;color:#fff;text-shadow: 1px 1px 1px #FCB3BC;background:#ffcbd2; /* Cor do fundo */border: solid 1px #FCB3BC;box-shadow: inset 0 0 6px #f5f5f5, 0px 1px 1px#FCB3BC;margin:+2px;margin-left:0px;display: inline-block;text-align: center;Font-family: Arial;text-transform: uppercase; font-size: 11px;float: center;padding:5px; height: 8px;width: 43px;-webkit-transition-duration: .80s;}cuddly:hover {cursor:hand;background:#EBEAC4; /* Cor do fundo quando passar mouse*/border: solid 1px #EBE89C;box-shadow: inset 0 0 6px #f5f5f5, 0px 1px 1px #EBE89C;text-align: center;Font-family: Arial;text-transform: uppercase; font-size: 11px; color:#fff; /* Cor da fonte quando passar mouse*/-webkit-animation: cuddly 1.3s;-moz-animation: cuddly 1.3s;-ms-animation: shake 1.3s;}@-webkit-keyframes cuddly {0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}}.cuddly {-webkit-transition: .9s; border-radius: 5px;}.cuddly:hover {-webkit-animation: useful .9s alternate ease;}
2.Salve e depois vá a layout e abra um gadget e coloque o seguinte:
<div style="left: -72px; margin-top: -8px; position: absolute; width: 20px;"><br /><a href="Link"><cuddly>Nome</cuddly></a><a href="Link"><cuddly>Nome</cuddly></a><a href="Link"><cuddly>Nome</cuddly></a></div><div></div>
O destacado de rosa refere-se ao posicionamento dele, quanto menor o numero mais ele vai para a direita e quando maior ele vai para esquerda.
O destacado de Amarelo significa a altura, quanto maior o numero mais o seu menu ira para cima. E quanto menor ele ira para baixo.
Espero que tenham gostado e até ao próximo post ;)
Créditos: vanessa tutoriais
Kissies,
Sofia
2 comentários
Olá
ResponderExcluirBem vinda de volta moça ^^
Tbm adoro o antigo Egito, porém, n sei muito sobre ele.
Gostei bastante dos detalhes desse lay :3
Skull-minds.blogspot.com.br
Olá:3
ExcluirObrigada^^
O Egito tem muitos mistérios^^ Por isso amo =^.^=
Beijinhos :*