Menu Border Along

Galera , um tuto super rapido que da qui 20 mim o pc sse apaga .



Bom , va em Editar HTML e procure por
]]></b:skin>
bom , logo depois cole este codigo

.menualong {

background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;

border-right: 5px solid #AFEEEE;

border-left: 5px solid #AFEEEE;

text-align: center;

color: #FF69B4;

-webkit-transition: 0.7s;

font-size: 8px;

font-family: handy;

text-transform: Uppercase;

}

.menualong:hover {

border-right: 50px solid #B0E0E6;

border-left: 50px solid #B0E0E6;

-webkit-transition: 0.7s;

letter-spacing: 6px;

color: #FF69B4;

background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;

}

@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

 Explicando ...
1- Background : url('http:///static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') Onde esta " http:// " até " .png " você pode substituir por um background... Ou seja , o fundo do menu .
2 - No border-right e a borda esquerda e o  border-left a borda direita . 5px e a espessura da borda , solid o tipo e #AFEEEE a cor
3 - No color : #FF69B4; e a cor do texto do menu. -webkit-transition:0.7s;é a velocidade do efeito , font-size: 8px; é o tamanho do texto. font-family: handy; e o nome da fonte que usamos no menu . Note que é uma fonte pixel e que mais a baixo eu tive que mais a baixoeu tive que hospeda-la pra usar .
4- texte-tranform: Uppercase; quer dizer o que estiver escrito no menu fica em letra maiuscula . Apague este trecho se não quiser .

bom , depois va em layout , adicionar gadget e HTML/JavaScript e cole este codigo

<center><div class="menualong"><a href="link">Nome</a></div>

<center><div class="menualong"><a href="link">Nome</a></div>
<center><div class="menualong"><a href="link">Nome</a></div>