// Menú de corazones //

Hey girls ♥
Aquí de nuevo, bien.
Ya casi somos 10 seguidoraaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas c:
En este post les voy a enseñar a 
tener su propio menú de corazones muuuy bonito :3
Y fácil obvio.







NOS DIRIGIMOS A:
Plantilla/ Editar HTML / CRTL+F

Buscamos:
                           ]]></b:skin>                         

Arriba de este código pegamos este:

@-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;
}

Vamos a diseño/  Añadir gadget (HTML)

Y adentro pegamos este código:

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

Rojo: Imagen que querremos que aparezca arriba de los corazones. Trata que sea del mismo tamaño.

Azul: Ulr de la página que cuando tu apretes te llevará a tal.

Listo!

Fácil no? 

Espero que les haya gustado.

Nos vemos ♥

-Saluditos-