Menu Along

Ele foi feito pela Stephanie do Garota do Olhar Sincero e postado noKawaii World. E aqui tem um live preview do menu. Bom vamos logo ao tutorial...

Vá no seu html e procure pelo famosíssimo código:

]]></b:skin>

Cole este código logo acima da tag procurada:

.menualong {background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center; /* fundo */border-right: 5px solid #AFEEEE; /* cor, espessura e formato da borda direita */border-left: 5px solid #AFEEEE;  /* cor, espessura e formato da borda esquerda */
text-align: center; /* Alinhamento do texto */color: #FF69B4; /* cor do texto */-webkit-transition: 0.7s; /* tempo que borda demora para esticar */font-size: 8px; /* tamanho da fonte */font-family: handy; /* tipo de fonte */text-transform: Uppercase; }.menualong:hover {border-right: 50px solid #B0E0E6;  /* cor, espessura e formato da borda direita ao passar o mouse */
border-left: 50px solid #B0E0E6; /* cor, espessura e formato da borda esquerda ao passar o mouse */
-webkit-transition: 0.7s;letter-spacing: 6px; /* Espaçamento das letras ao passar o mouse */color: #FF69B4;  /* cor do texto ao passar o mouse */
background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;  /* fundo ao passar o mouse*/
}@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf'); } 

Depois de ter feito isso, salve e vá em layout. Clique em Adicionar um Gadget >> HTML/javascript e cole isso:

<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><center><div class="menualong"><a href="link">Nome</a></div><center><div class="menualong"><a href="link">Nome</a></div>

Onde está link, troque pelo link da sua página dããã e onde está Nome troque pelo nome da sua página. Lembrem-se plágio é crime, então se usarem dêem os créditos à Stephanie, ao GDOS e ao KW.