Menu arrow

Olá queridos leitores como vocês estão? Eu estou bem também, estava procurando por tutoriais pra postar para vocês, como sempre os tutoriais que eu procuro são simples e bem fáceis assim não complica pra ninguém não é mesmo?

Eu sei que existe vários e vários blogs de tutoriais e que também já postaram esse tuto provavelmente, mas não posso deixar o blog só com utilitários, preciso procurar coisas úteis pra postar também, mas irei diminuindo cada vez mais a quantidade de tutoriais, espero que entendam.

Encontrei esse menu no KW e me apaixonei logo de cara, acho que já deu pra perceber que amo coisas simples e com pouco efeito não é mesmo? E o tutorial do menu é exatamente desse jeito, ele não tem um efeito tão chamativo mas também não é tão apagado. Clique em "Leia Mais" para conferir esse pequeno, simples e fácil tutorial.


Primeiro você terá que ir em "Editar html" procurar pela tag ]]><b/:skin> e colar o código abaixo acima da tag:
@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 ;}.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;}
Após ter encontrado a tag altere o que está em negrito no código acima e cole em cima da tag, depois salve!

Agora adicione um gadget HTML/Javascritp e cole o código abaixo:

<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>
O resultado final será esse:

E ai gostaram? Bem simples e fácil não é mesmo? Espero que tenham gostado e até o próximo post ♥ beijos.

6 comentários:

  1. Muito bom o tuto, eu estou usando esse menu no meu blog !
    cr4zy-world.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigado! Ele é bem simples mas amei assim de primeira *---*

      Obrigado pela visita :3

      Excluir
  2. Obrigada pela dica! Muito boa!

    Estou seguindo!
    Se quiser, conheça e siga meu blog também...
    Beijinhoss
    Blog Farmacêutica & Vaidosa|Fan Page Blog|Twitter Blog

    ResponderExcluir
  3. Seu blog é bem planejado e muito bom *-* Adorei mesmo! Parabens.

    http://buscandosonhos.com/

    ResponderExcluir
    Respostas
    1. Own, é muito bom ler isso, obrigado ♥

      Obrigado pela visita ♥

      Excluir

- Obrigado pela visita e pelo comentário, não se esqueça de deixar o link do seu blog abaixo para que eu possa retribuir sua visita.

-Se for para criticar que seja logado, em anônimo sua opinião não valerá de nada.

 
Design e programação: Carol Mascarenhas
Confissões de um garoto - 2011 / 2015. Todos os direitos reservados Tecnologia do Blogger