Tutorial: Menú simple de corazones #2

¡Hola! ♡

¿Como están?! Espero se encuentren muy bien.

Enserio estoy tratando de publicar seguido, algo que se me hace muy complicado por faltas de ideas. Hoy les traigo un menú super hermoso, que les va a encantar. Antes de mostrárselo le quiero dar créditos a Sugar Free, este tutorial es de su blog.

Preview

Nos dirigimos a Plantilla | Editar HTML | CTRL + F

Buscas:

]]></b:skin>

Encima de el, colocas este código:

@-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 JavaScript

Adentro colocas el siguiente 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>

Editar:

Rojo: Link de la imagen. Trata de que sea del tamaño del gadget

Azul: Url de página

¡Listo!

Bonito, no creen? Enserio espero les allá gustado.

Estaba pensando en hacer otro tipo de entradas randoms obvio, no dejaré los tutoriales y eso. Solo por este tiempo que estoy en vacaciones. ¿Les parece?

No olviden comentar. Me harían super feliz, también seguir el blog. Que cada vez somos más! ♥

¡Hasta luego! <3