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 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.