Menú top "LOVE" ♥~

Para colocar este genialoso menú, si quieres, puedes verlo en vivo & directo AQUÍ!♥; debes seguir los sencillos pasos que describiré ahora:
1er paso: Dirígete a Plantilla, presiona el botón "Edición HTML" & una ves cargado la pagina, presiona sobre el recuadro del código de tu plantilla.
2do paso: Una ves en tu cuadro, debes buscar {con la ayuda mágica del Ctrl + F} la siguiente linea:
RECUERDA: el buscador se te abrirá en el cuadro de tu plantilla.
</body>
3er paso: Una ves encontrado lo dicho, pegas ARRIBA de ello, lo siguiente:
<style>
.MENUlove { /* BORDE TOP */
font-family: arial;
font-size: 11px;
text-transform: uppercase;
padding: 10px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
overflow: hidden;
text-align: center;
border-top: 5px solid #FFCEC6;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.MENUlove:hover { /* BORDE TOP HOVER */
border-top: 5px solid #BBE7D9;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.MENUlove a { /* LINKS */
background: #FFCEC6;
border-radius: 0 0 30px 30px;
color: #fff;
text-decoration: none;
padding-left: 50px;
padding-right: 50px;
padding-top: 10px;
padding-bottom: 10px;
text-shadow: 0px -100px 1px #FFF;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
}
.MENUlove a:hover { /* LINKS HOVER */
background: #BBE7D9;
color: transparent;
font-style: italic;
padding-left: 20px;
padding-right: 80px;
text-shadow: 30px 0px 0px #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
</style>
<div class="MENUlove">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">SITE</a>
<a href="#">LINKS</a>
<a href="#">GOODIES</a>
<a href="#">BACK</a>
</div>
Edita como indica lo que esta en MAYÚSCULA.
background: COLOR DE FONDO.
color: COLOR DEL TEXTO/LINKS.
#: URL DONDE TE GUIARA EL LINK.
border: TAMAÑO/ETILO/COLOR DEL BORDE.

PRESTA ATENCIÓN: en la parte /* LINK HOVER */, el color del texto esta en transparente & debe quedar así, para cambiar el color del link al pasar el cursor, debes editar la parte donde dice:
text-shadow: 30px 0px 0px #fff;
El color que allí indica {#fff} es el color de la sombra del texto, que es lo que esta visible al pasar el cursor.

18 comentarios:

  1. Mel, ¡muchas gracias por el tutorial! ¡Es muy útil!

    ResponderEliminar
  2. GRACIAS mell SAMA !!
    esta muy muy lindo si lo huso creditos auque ya estas includida linda
    me gusta mucho tu blog!!
    saludos

    ResponderEliminar
  3. mell pesi mi plantilla no tiene ?
    que hago?

    ResponderEliminar
  4. Gracias mell,sabes me emocione cuando vi tu coment en mi blog*w*
    jeje Bueno la duda es que cuando busco "body"no me sale..por eso te pregunto si hay otra manera de colocarlo?

    ResponderEliminar
  5. Quee lindo es este menu! Creo que lo utilizare para mis blogs! Muchas graciaS!
    Soy rober de http://robeertita-kawaii-blog.blogspot.com.ar/
    Por si las dudas XD

    ResponderEliminar
  6. Gracias mell
    lo intentare y si pasa algo te aviso!!
    gracias hermosa!

    ResponderEliminar
  7. ohh mell ya estaba sin ideas...ya que los codigos,no caian...pero probe con anadir CSS y funciono..solo estoy buscanlo ponerlo en el centro..pero sirve...gracias por sacar de tu tiempo por explicarme..y pasarte por mi blog(es que te admiro mucho)
    saludos!

    ResponderEliminar
  8. muy chulo el tutorial, gracias por el ^^ por cierto te respondi el mail antes no se si lo viste

    ResponderEliminar
  9. Hermoso *_* lo usaré algun dia♥ gracias por acepar mi publicidad ^^

    ResponderEliminar
  10. *O* Que lindo menú Mell!! está hermoso, lo pondría si ya no tuviera un menú >.< También quería decirte que Tienes un premiecito en mi blog~! http://anime-kawaii-love.blogspot.com/2013/06/premiecitos.html

    Un abrazo :3

    ResponderEliminar
  11. ohh mell gracias por aceptar mi publicidad,ya te envie el mensaje por el facebook!!
    avisame cuando hayas puesto el boton.[por favor^^]

    ResponderEliminar
  12. Me gusta mucho este menu lo pondria en mi blog si fuera con submenus u_u

    grascias por el tuto <3

    ResponderEliminar
  13. ¡Hola! Me encanta tu blog, por cierto, ¿cómo has colocado ese header que cambia de imagen al rato? o:
    Me gusta mucho, y me gustaría ponerlo en mi blog. >3<

    ¡Gracias!

    ResponderEliminar
  14. >.< Hola mi adorada princesa... wow cuanto tiempo... la verdad que sin tiempo yo, pero aun asi dandome un tiempito para ti, a verdad que me gustaba mas el anterior diseñor de la pagina... pero este tampoco est tan mal... la verdad que me sorprendes... mi adorada princesa... como has estado?... la verdad yo extrañandote... no veia la hora para poder escaparme a comentar algo... sobre todo despues de estar perdido casi un mes... bueno... felizmente tuve muchos caramelos para entretenerme xD... espero que pronto me des algunos mas... n.n cuidate y hasta al proxima mi reina ;)

    ResponderEliminar
  15. Gracias Mell, esta muy lindo n.n etto en mi blog hay un premio para ti :D Saludos

    ResponderEliminar
  16. abhyuasbjabdjadbjadbam *---* Muchisimas isimas GRACIAS Eres Mi Salvación.
    PD:Me Afilias Y yo Te Afilio?
    PDD: Url De My Blog(http://tytryutrytrytyyty.blogspot.com.ar/)

    ResponderEliminar