Avisos *o*

Precisamos de postadores! Quer ser um? Vá até o menu, e clique em You. Vem! :)

16 de jan de 2013

Tutorial: Menu Arrow




Yoo! Primeiro tutorial do blog! *--*
O tuto é bem simples, é o menu que eu uso aqui no blog. Podem ver a preview na barra lateral. Bem simples. Créditos: Kawaii World (www)

Vamos ao tuto!
1- No seu HTML, procure por ]]></b:skin> e cole, acima da tag, o código abaixo
@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- Edite o que está em negrito e salve. Use uma tabela de cores HTML, eu uso essa aqui

3- Vá em layout e adicione um gadget HTML/JavaScript e cole o seguinte código:
 <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>
Onde está escrito SEULINK é o link da página do menu, e onde está escrito Menu é o nome da página.
Simples, não é mesmo?

xoxo ;3

5 comentários:

  1. Oi flor! Amei seu blog, ótimo tutorial !
    Seguindooo ~
    Bjs,
    minhavidaforadeseerie.blogspot.com.br

    ResponderExcluir
  2. Aw, lindo esse menu né ? *u*
    Bom, sobre o UdP, eu fechei ele. Não estou mais fazendo encomendas, mas estou pensando em fazer encomendas no CA. Então você pode deixar um comentário lá no meu blog com o máximo de descrição possível :}
    Kisses da Feê :B

    cookiefashion.blogspot.com

    ResponderExcluir
  3. Flor, eu amei o tuto, já conhecia. Mas eu gostaria de pedir que mudasse a sua imagem de inicio de post, ela foi feita por mim para ser usada no meu blog, é só pedir e posto algumas. Pode ser?

    Bjs
    garotas-cupcakes.com

    ResponderExcluir
    Respostas
    1. Awn' anjo, desculpe, não sabia ^^ Troco sim...

      Excluir

Esta areazinha é livre para você!

Mas antes disso, leia algumas regrinhas:

. Seu comentário é muito bem-vindo aqui, desde que não contenha xingamentos e etc.
. Quer colocar o link do seu blog? Fique a vontade! (Se você não colocar o link do seu blog, vou ficar muito chateada! rs :[ Assim, como eu vou poder retribuir a visita?)
. Fale o que você acha, sugestões, críticas, pedidos de posts, divulgação....