Tutorial: Menú simple de corazones


¡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 u.u. 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.


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 ramdos 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! ♥

8 comentarios:

  1. (≧▽≦)/ hola se ve bonito,gracias (๑ˇ3ˇ๑)

    ResponderEliminar
  2. Hola!
    Super chulo el menú, gracias por el tutorial.
    Besos

    ResponderEliminar
  3. Hola! super lindo el menú, simple y útil. Un beso.

    ResponderEliminar
  4. ¡Hola! Que bonito queda ♥ oye, te nominé a un Liebster Award, puedes ver la entrada aquí: http://kikkochi.blogspot.com/2016/08/nominacion-al-liebster-award.html perdón, no quiero parecer spamer ;v;

    ResponderEliminar
    Respuestas
    1. Gracias por la nominación. No hay problema c:
      Saludos♥

      Eliminar
  5. Hola, ¿como hago para ponerlo centrado? lo coloco y me queda todo pero es ha la izquierda, intente de todas la formas pero no logro resultado, y estoy mas que enamorada de este mini menu. Podrias ayudarme plisss.
    ME ENCANTO EL TUTO!

    ResponderEliminar
    Respuestas
    1. ¿Como centrado? sí refieres a la imagen o a los corazones. ¿? Sí te refieres a la imagen tiene que ser del mismo tamaño del Gadget, para que salga bien.

      Saludos.

      Eliminar

¡Hey, gracias por leer la entrada!

- Sí vas a dejar un comentario que sea referente a la entrada.
- Comenta con respeto.
- No spam.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog.
- Sí tienes problemas con un tutorial comenta, para poder ayudarte.

- Símbolos:
☯♠♤♣♧ ♥♡♦♢♔ ★✖ ✗✘✌✿☽ ☾♩ ♪ ♫ ♬ ✧ ❝❞ ❀ ❄

- Emojis:
(>‿◠)✌ (✿◠‿◠) (▰˘◡˘▰) ( ͡° ͜ʖ ͡°) (≧∀≦) ( ˘ ɜ˘) (・w・)[̲̅$̲̅(̲̅ ͡° ͜ʖ ͡°̲̅)̲̅$̲̅] (ノ◕ヮ◕)ノ*:・゚✧ ( ͡° ʖ̯ ͡°) ( ͡° ᴥ ͡°) ヽ(゚▽゚*)乂(*゚▽゚)ノ

Recuerda dejar la URL de tu blog para poder visitarlo.

Sí te gusto la entrada no olvides seguir el blog, así no te pierdes ninguna entrada.

Contacto:

(para cualquiera cosa idk)

gladiuskagg@gmail.com
-Glad.