Menú Uops

Como bien dije en la entrada de Cómo buscar código HTML en Blogger, mi intención era y es, empezar a subir tutoriales de menús y de efectos para el blog y aquí vengo con el primero y es un menú simple para usar en la cabecera del blog.

P R E V I EW

1. Lo primero es ir a Tema > Personalizar > Editar HTML y tal y como expliqué en esta entrada usamos el buscador interno para buscar ]]></b:skin>. Y encima pegar el siguiente código:

.simplemenu {

cursor: pointer;

font-family: Georgia;

position: absolute;

width: 700px;

margin-top: 28px;

height: 62px;

font-size: 16px;

letter-spacing: 1px;

overflow: hidden;

font-style: italic;

margin-left: 90px;

}

.simplemenu a {

color: #ffcbcb;

padding-left: 29px;

padding-right: 11px;

text-shadow: 0px -100px 1px #94d0cf;

padding-top: 58px;

-webkit-transition: all 0.8s ease;

-moz-transition: all 0.8s ease;

-o-transition: all 0.8s ease;

}

.simplemenu a:hover {

color: transparent;

padding-left: 29px;

padding-right: 11px;

text-shadow: 0px 0px 0px #94d0cf;

-webkit-transition: all 0.8s ease;

-moz-transition: all 0.8s ease;

-o-transition: all 0.8s ease;

}

Todo lo que está resaltado se puede modificar para cambiar la fuente, el tamaño de la fuente, el tamaño del menú y los colores. Lo demás también se puede modificar, pero si no controláis mucho html es mejor no hacerlo.

2. Ahora en un gadget HTML/Javascript añadimos lo siguiente: 

<div class="simplemenu">
<a href="LINK">TÍTULO</a>
<a href="LINK">TÍTULO</a>
<a href="LINK">TÍTULO</a>
<a href="LINK">TÍTULO</a>
<a href="LINK">TÍTULO</a>
<a href="LINK">TÍTULO</a>

<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)"></a>

</div>

Como antes, todo lo que está resaltado es lo que se puede cambiar.

Y hasta aquí el tutorial de hoy. Espero que os guste y si tenéis cualquier duda, no dudéis en poneros en contacto conmigo :)