Menu Arrow

Hoje eu vou falar feito norminho, então boa tarde pessoal. Tragou outro tutorial de menu para vocês, esse e bem simples ao passar o mouse sobre as caixinhas do menu, vai aparecer  setinhas, que dai vem o nome "Arrow". Pessoalmente eu gostei muito dele, amo menus simples e que fazem diferença, antes que eu me esqueça os créditos são do KW. Caso queiram dar uma olhadinha no menu, basta clicar no botão abaixo.

Brevia do efeito

1. Abra seu HTML do blog que deseja aplicar o menu, e procure por ]]></b:skin>. Acima dessa tag cole esse código:

Códigos

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

.arrow {margin: 1px; text-align: center; font: 8px handy; text-transform: uppercase; display: inline-block; position: relative; color: #000000; width: 45px; padding: 3px; text-decoration: none; background-color: #CORDOFUNDO; border: 2px solid #CORDABORDA;}

.arrow:hover { background-color: #CORDOFUNDOHOVER; border: 2px solid #ef7aa1;}

.arrow:hover:after {

content: ''; width: 0; height: 0; position: absolute; left: 50%; 

margin-left: -2px; bottom: 0; border-width 9px; border-style: solid; border-color: transparent transparent #CORDASETA transparent;}

2. Arrume  as partes em negrito como se pede, e então salve. Agora vá em seu layout e adicione um gadget de HTML/JavaScript, cole:

Códigos

<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>
<a href="SEULINK" class="arrow">Menu</a>

Prontinho! Ai esta o menu, basta personalizar como desejar.