Menú top ♥

Hola bloggeritas! Hoy vengo con un nuevo tutorial de un menú muy pero muy WOW ;)

Todo lo que tienen que hacer es ir a Plantilla-Edicion HTML,presiona sobre el recuadro del codigo de tu plantilla y buscan(Ctrl + f) la siguiente linea:

</body>

Una vez encontrada la linea(es decir arriba de la palabra </body>)pegas ARRIBA de ella este codigo:


<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="URL">HOME</a>
<a href="URL">ABOUT</a>
<a href="URL">SITE</a>
<a href="URL">LINKS</a>
<a href="URL">GOODIES</a>
<a href="URL">BACK</a>
</div>

Explicaciones:

• background:color del fondo
• color:color de los LINKS
• URL: url donde te guiara el link
• border: TAMAÑO/ETILO/COLOR DEL BORDE.
• /* LINK HOVER */: el color del texto esta en transparente,para cambiar el color del link al pasar el cursor, debes editar la parte donde dice:

text-shadow: 30px 0px 0px #fff;

 #fff es el color de la sombra del texto, que es lo que esta visible al pasar el cursor.

Esto fue todo si tienen duda comenta en esta entrada y yo tratare de ayudarlas! :D Bye Bye!