13/12/15

Tutorial: Menú sweetheart


¡Holaaa! Que onda? Yo bien con calor :( pero gracias al cielo existe algo llamado aire acondicionado xD. Hoy les traigo el tutorial sobre el menú que tengo ahora mismo en el blog xDD Créditos a Miki por el! Igualmente les dejo un preview por si acaso ^^

Live preview




Paso 1

Editar en HTML

Plantilla | Editar HTML | CTRL + F y buscas:
]]></b:skin>
Y arriba de ]]></b:skin> pegas lo siguiente:
menu2{
background-image: url(URL IMAGEN DE FONDO);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 3px;
text-transform: lowercase;
font-style: italic;
padding: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 106px;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .20s;
}
menu2:hover{
letter-spacing: 1px;
opacity: .70;
-webkit-transition-duration: .20s;
}
Editamos:
Rojo: url del fondo del menú
Azul: Tipo de fuente
Rosa: Medida de separación de las letras
Verde: el formateo de las letras: puede ser italic, bold, inserted o deleted. Dependiendo tu gusto cambias el <<italic>> por alguno de los anteriores :)

Paso 2

Añadir el menú en un gadget.

Diseño | Añadir gadget | HTML o Javascript

Copias y pegas:
<a href="LINK" title=""><menu2>NOMBRE</menu2></a>
<a href="LINK" title=""><menu2>NOMBRE</menu2></a>
<a href="LINK" title=""><menu2>NOMBRE</menu2></a>
<a href="LINK" title=""><menu2>NOMBRE</menu2></a>
<a href="LINK" title=""><menu2>NOMBRE</menu2></a>
 Está todo indicado ^^



Eso es todo! Espero que se haya entendido, si tienen alguna duda, como siempre, no duden en preguntarme en los comentarios :D

Antes de irme quiero invitarlos a que participen de la iniciativa que hizo Bleiÿ "Intercambio de regalos navideño" La verdad me pareció una genial idea y seria aún más genial que se unan para que seamos más participantes y la iniciativa más emocionante :)
Click en la imagen!


Chaaaus cx
-Amary-

7 comentarios:

  1. (⊙▽⊙) Como siempre tutos muy prácticos y lindos!! Espero poder usarlo en mis blogs porque quiero cambiar un poco el menú jaja, besos.

    ResponderEliminar
  2. Hola!
    Gracias por el tutorial.
    Besos

    ResponderEliminar
  3. ¡Hola! Gracias por participar del intercambio. *w*~
    Pasaba para avisarte que te he enviado un correo por mail con la personita quien te ha tocado preparar el regalo para el Intercambio de Regalos Navideño.

    El menú que compartes es muy lindo *O*

    ¡Espero tengas una linda semana! Abrazos *3*//

    ResponderEliminar
  4. (´• ω •`)ノ Holaaa!!!!

    Hermoso tutorial ame el menu esta bellisimo! gracias por compartirlo <3

    ResponderEliminar
  5. Holaaa, muchas gracias por pasarte por mi blog ♥ ya te sigo!
    tienes un blog muy lindo y dinámico :3

    Un beso guapa!

    ResponderEliminar
  6. muy bueno el tutorial, gracias por compartirlo

    saluditos *3*

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Reglas:
-Respeto
-No insultar

¡Gracias por comentar!

Emojis:
(∩ω∩) | (>△<) | (>▽<) | (⊙▽⊙) | (●ω●) | (╯ω╰) | (☆▽☆) | (≧ω≦) | ≡(▔﹏▔)≡
Simbolos:
☺♥♫△☆ღ