Menu Barrinhas Border Along

Alguém ai aceita Bis? E ai como vão meus ninjas hoje? Eu vou ótima, ganhei um Headphones personalizado com pedrinhas e com meu nome nele *0* Mas trago um menuzinho chamado "Border Along "  o nome dele realmente tem tudo haver com ele. Quem crio ele foi a Stephanie Vieira do Tumblr Static. Todos os créditos vão para ela e também para o KW. O menu e feito apenas com códigos CSS e é bem fácil de editar, mas precisa estar atento para não fazer besteira.  Esse menu eu aconselho para quem tem um layout pequeno e sem muitos gadgets ou para iniciantes de HTML. 

Brevia do efeito

1. Vá em seu HTML e procure por ]]></b:skin>. Acima cole o código abaixo:

Códigos

.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');}

Veja aqui a explicação do código [Imagem Aqui]

2. Tudo arrumado? Otimo agora vá ate seu layout e adicione um Gadget de HTML/JAVASCRIPT e dentro cole:

Códigos

<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>

 A onde está 'link' você cola o endereço da página que você quer, e em Nome você coloca o nome da página. Se usarem creditem, é não esqueçam de dizer o que acharam. Beijinhos