15/01/2013

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.


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. 

4 comentários:

  1. Aceita afiliação flor?
    princessallstar-official.blogspot.com.br

    ResponderExcluir
  2. Drw, como sou afiliada acho que deveria avizar uahushu'
    ta tendo um jogo valendo divugação por um mes la no blog

    http://kawaii-little-things.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Yo! Obrigada por me avisar, consertesa participarei

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345