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.



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

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!

Para que no tengas ningún problema/duda:

- Deja tu comentario referente a la entrada.
- Para las afiliaciones: ir a su sección (Afiliame/Afiliados)
- Comenta con respeto.
- No SPAM.
- No malas palabras.
- Respeta al administrador y a los usuarios del blog.
- Sí tienes problemas con un tutorial comenta o escríbeme a mi correo para ayudarte.
- Sí tienes algún problema conmigo, ya sea por créditos, derechos de autor o otro, escríbeme a mi correo.

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

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

Recuerda dejar tu comentario + la URL de tu blog para poder visitarlo.
- (No cuenta como SPAM)

Sí te gusto la entrada no olvides seguir el blog, así no te pierdes ninguna entrada, actualizo cada semana o cuando pueda.

Contacto:
gladiuskagg@gmail.com

¡Saludos!

-Glad.