Menu Border Me

Olá pequenas tartarugas asiáticas! (uma tartaruga de olho puxado :O)

Tudo bem com vocês? Antes de qualquer coisa, gostaria de avisar que estarei postando por aqui um-dia-sim-um-dia-não, devido aos meus problemas pessoas. Caso eu consiga me resolver, talvez volte ao ritmo de postagem habitual, só pra avisar. Mas, agora iremos falar do post de hoje. Esse menu que vos trago, tem um efeito bem simples, porém fofo. Ao passar do mouse, o efeito da borda dele inverte para o outro lado. Preview aqui, é só se dirigir ao gadget que está escrito Menu Border Me e passar o mouse. Confere como fazer?

Menu Border me

Primeiramente vá em Modelo>Editar HTML e clique em "Prosseguir" no aviso que pode aparecer. Depois, prima CTRL+F no seu teclado e na caixa de pesquisa que aparecer, pesquise pela tag ]]></b:skin>. Acima dela, cole o seguinte código:

borderme{

font-family: Century Gothic;

font-size: 11px;

color:  #FFF; /*cor do texto*/

border-radius: 0px 6px 6px 0px; 

background: #B0E0E6; /* fundo do menu*/

width: 23px;

margin: 2px;

transition-duration: 1s; 

-moz-transition-duration: 1s;  

-webkit-transition-duration: 1s;  

text-decoration: none;

}

borderme:hover{

background: #FFC0CB; /*fundo do menu ao passar o mouse*/

border-radius: 6px 0px 0px 6px;

text-decoration: none;

}

Edite as partes identificadas no código e salve. Agora vá em Layout e adicione um gadget de HTML/Javascrip e cole o seguinte código:

<div><a href=" LINK "><borderme> Nome do menu aqui </borderme></a>

<a href=" LINK "><borderme> Nome do menu aqui </borderme></a>

<a href=" LINK "><borderme> Nome do menu aqui </borderme></a>

</div>

Edite aonde é indicado e salve. Pronto, seu menu já está funcionando! Espero que tenham gostado desse pequeno utilitário, se forem usar, deem os créditos. Bezzo,

/Sarah