16 dezembro 2012

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>

2 comentários:

Lala and Kau disse...

Se num tem previw do menu??
#may-Sun

layrakauana.blogspot.com

Shiory Chan disse...

Também gostaria de um preview
Nhaac

docemundokawaii.blogspot.com
cristaisturorial.blogspot.com

Postar um comentário