Tutorial - Menu simples de coração


Yo Candies ~ Minhas aulas começaram, isso significa que os posts voltaram a ser postado uma vez por semana, geralmente nos finais de semana. Mas não desistem de mim. E desculpa a todos os afiliados, eu fiquei bem ausente nessa semana mas tentarei recuperar esse ausência. E ah, ja podem ir dando tchauzinho para esse layout, pretendo trocar em breve.

Faz tempo que eu não faço um post de tutorial né? Pois é. Eu não sou tão criativa assim, então eu tenho que ficar reiventando as coisas aushuhs. Então posts como esse são bem raros. Ou seja, não se acostumem com isso asuhsuah. Enfim, como ja faz um tempo que eu fiz esse menu, eu decidi trazer ele para vocês. Ele é bem simples e bem delicado, para ser usado com uma imagem. Espero que gostem.


Eu fiz esse menu com um outro que eu ja tinha criado, caso queira o outro efeito separado o post do tutorial esta aqui.

Cole acima de ]]></b:skin> :

@-webkit-keyframes swing { /* não mexa em nada daqui */
  20% {-webkit-transform: rotate(20deg);}
40% {-webkit-transform: rotate(-10deg);}
60% {-webkit-transform: rotate(5deg);}
80% {-webkit-transform: rotate(-5deg);}
100% {-webkit-transform: rotate(0deg);}
}

@keyframes swing {
20% {-webkit-transform: rotate(20deg);}
40% {-webkit-transform: rotate(-10deg);}
60% {-webkit-transform: rotate( 5deg);}
80% {-webkit-transform: rotate(-5deg);}
100% {-webkit-transform: rotate(0deg);}
}

.swing {-webkit-transition: .7s; float: left; width:28px; heigh: 28px; margin-right: 2px; margin-bottom: 2px;  -webkit-transform-origin: top center; transform-origin: top center; }
.swing:hover {-webkit-animation: swing .7s alternate linear; -webkit-transform-origin: top center; transform-origin: top center;}
#heart{
background: #c8e4fb; /* cor do menu */
width: 22px; /* largura do menu */
height: 11px; /* altura do menu */
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-bottom: 3px;
margin-left: 2px;
border: 1px solid #aed5f6; /* cor da borda do menu */
color: #acd1f0; /* cor da fonte do menu */
-webkit-transition-duration: .50s;
}

Para usar é só colar isso em um gadget HTML/Javascript:

<img src="ur_da_imagem"/>
<div style="position: absolute; margin-top: -30px; left: 5px;">
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
<div class="swing"><a href="/" id="heart">♥</a></div>
</div>

Para mudar o menu da imagem de lugar, é só mexer no margina-top (pra cima ou para baixo) e left (esquerda ou direita) no próprio gadget mesmo. Ai é só ir ajustando.

Espero que gostem do menu. Se usarem, por favor creditem ♥.

Chu~

8 comentários:

  1. Adorei meu amor. Muito lindo. Estou nessa de fazer menus também. Adoro.

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado <3. É divertido auhuhas.

      Excluir
  2. OMG LEITORA QUE NUNCA COMENTAVA MAIS RESOLVEU SE MANIFESTAR*--*

    NHAAAAA AMO MUITO SUAS POSTAGENS AMOREEEE QUE KAWAIIIII. gostei bastante do Menu </3

    ResponderExcluir
    Respostas
    1. Olá moça, pode comentar mais aqui eu não mordo <333.
      Obrigada <333 Fico feliz que tenha gostado.

      Excluir
  3. Olá, giovana ,oh, seu nome é tão fofinho >3<, amei shajhsjka
    Poxa, conheci seu blog agora, achei este layout lindo, mas se você vai mudar tenho certeza que vai ser por um ainda mais lindo hahaha'. Ai meu deus, minhas aulas já voltara TT-TT, olha, eu tô bem triste.

    Poxa, eu não sei quase nada de HTML, haha' e você aí, postando seus próprios códigos, parabéns.

    eu achei o menu lindinho, mas o azul, não combina com meu layout, será que você deixaria eu trocar de cor? E fiqu tranquila vou por os créditos ;3. Vou usar no meu lay, sim.

    Beijos.~

    ResponderExcluir
    Respostas
    1. Olá ~ uhsauhsa Obrigada <3.
      Eu espero que ele fique mais bonito, por enquanto ta horrível asuhauhs.

      Claro que pode, fique a vontade para trocar a cor, tamanho, tamanho da imagem e etc. Só não mudar os códigos que coloquei e fica tudo bem. Ficarei muito feliz em te ver usando <3.

      Excluir

Obrigada por comentar, mas entenda algumas coisas:
» Por favor, comente algo sobre o assunto do post.
» Não tenho problemas com palavrões, mas seja educado.
» Aceito pedido de afiliações.
» Respeite minha opinião.