Novo lay + Menu Camila

| |
Hellooo, viram o novo lay, né nããããooo, somos todos cegos? Agora tem elite de afiliados! Ficou meio uma coisa de natal que está chegando ,oba, oba, oba com esse verde e vermelho, mas até que eu gostei, e não deram os milhares de bugs que deu da outra vez. Lembram da pobre da minha irmã? Então, quando eu estava terminando o lay do blog, ela me "desafiou" a fazer um menu igual a elite de afiliados. E como eu não recuso desafios eu fiz, e pra falar a verdade ele ficou bem bonitinho. E dei o nome de Camila, porque foi a maldita que me "desafiou".
O resultado é esse:

Eu esqueci de colocar, mas acho que deu para entender que o rosa é normal e o preto é hover.
E aí? Gostaram? Clique em read more!
Vá no seu HTML e procure por:
]]></b:skin>
Acima dessa tag, cole isso:
/*---Menu Camila By Complicada e Perfeitinha---*/
camilabycp{
background: #c93332; /* Cor de Fundo */
color: #000000; /* Cor da Fonte */
font-size: 12px; /* Tamanho da fonte */
text-align: center; /* Alinhamento do texto normal*/
width: 40px; /* Tamanho do quadradinho do menu*/
float: left;
font-family: century gothic; /* fonte do menu */
border: 3px groove #788a49; /* cor, espessura e estilo da borda normal */
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.6s linear;
-webkit-transition: all 0.8s linear;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
transition: all 0.8s linear;
padding: 5px; 
margin-right: 5px;
margin-top: 5px;
}
camilabycp:hover{
background: #788a49; /* Cor de Fundo ao passar o mouse /*
font-size: 20px; /* Tamanho da fonte ao passar o mouse */
text-align: center; /* Alinhamento do texto em hover */
color: #fff; /* Cor da Fonte ao passar o mouse */
float: left;
font-family: century gothic; /* estilo da fonte ao passar o mouse */
border: 3px groove #c93332; /* Cor, espessura e estilo da Borda ao passar o mouse*/
-webkit-transform: scale(1.50);
-moz-transform: scale(1.50);
padding: 3px;
margin-right: 5px;
margin-top: 5px;
}
/*---Fim do Menu Camila by Complicada e Perfeitinha---*/ 

Entendendo
Em 'background: #788a49;' você pode trocar por 'background: url('url da sua imagen aqui')'. Você pode colocar duas imagens: uma para o normal e uma para o hover
Caso você esteja com dúvidas com as cores, consulte esta tabela. E caso esteja com dúvida em qual borda usar, veja este post.
Em 'text-align: center;', fica o alinhamento do texto dãããã. Você pode trocar para left (esquerda) ou right (direita).

Utilizando

Para usar o menu, adicione um gadget de html e cole isso:
<center><a href="link da página aqui"><camilabycp>Nome dá pagina aqui</camilabycp></a></center>
Caso queira que o menu fique 'lado a lado' e não 'um em cima do outro' é só retirar <center> e </center>.

Bom gente, o resto vocês já sabem, eu negritei as partes que vocês tem que editar e está tudo bem explicadinho na legenda pelo menos eu acho.
Se usarem, gostarem ou repassarem, creditem e comentem!
Kiss
Nathy

2 comentários: