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; /*tipo de cursor*/
font-family: Georgia; /*fuente*/
position: absolute;
width: 700px; /*ancho*/
margin-top: 28px; /*margen superior*/
height: 62px;
font-size: 16px; /*tamaño fuente*/
letter-spacing: 1px; /*espacio entre letras*/
overflow: hidden;
font-style: italic; /*estilo de fuente*/
margin-left: 90px; /*margen izquierdo*/
}

.simplemenu a {
color: #ffcbcb; /*color fuente*/
padding-left: 29px;
padding-right: 11px;
text-shadow: 0px -100px 1px #94d0cf; /*sombra del texto*/
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; /*sombra del texto*/
-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.