Menú JQuery con iconos

Hoy vamos a mostraros como podemos poner en nuestro blog, un menú JQuery con iconos.
Aquí puedes ver como funciona.

Insertar un gadget en nuestro blog

Para ello lo primero que tenemos que hacer esinsertar en nuestro blog un gadget.
Insetar e gadget.
Nos vamos a Diseño > Añadir un gadget> HTM /Javascript

Lo más lógico es colocar el gadget, en la parte superior de nuestra plantilla.

<ul class="iconmenu">
<li><a href="ENLACE_1">Inicio</a></li>
<li><a href="ENLACE_2">Mapa del Sitio</a></li>
<li><a href="ENLACE_3">Imágenes</a></li>
<li><a href="ENLACE_4">Contacto</a></li>
</ul>

Realizando los cambios del gadget

Cambios lo marcado en rojo por la URl de nuestra entrada.

Lo marcado en azul por el nombre que la entrada

Y lo marcado en morado por el icono.

Podeís descargar los iconos en la página de Awesome

También puedes leer este post donde te explicamos como usar esta aplicación .

Editando nuestra plantilla

Recuerda, antes de hacer cualquier modificación, es recomendable realizar una copia de seguridad de tu plantilla.

En Blogger > Plantilla > "Crear/Restablecer copia de seguridad"

Ahora nos toca incluir en nuestra plantilla el código que hará que funcione la vista de los iconos.

En nuestra plantilla lo primero nos vamos a Blogger
Tema > Editar HTML
Buscamos <head> y justo encima pegamos este código CSS.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Añadir el código CSS

Ahora es el momento de incluir el código CSS.

Tenemos dos opciones de añadirlo.

1. Buscamos ]]></b:skin> y justo encima pegamos este código CSS.

2. nos vamos a Tema > Personalizar > Avanzado > Añadir CSS

ul.iconmenu {
margin: 10px auto;
padding: 0;
text-align: center;
font-size: 0;
}
ul.iconmenu li {
position: relative;
display: inline-block;
overflow: hidden;
padding: 20px 10px 5px;
font-family: Oswald, sans-serif;
font-size: 30px;
}
ul.iconmenu li a {
text-decoration: none;
color: orange;
}
ul.iconmenu li a:hover {
color:orangered;
}
ul.iconmenu span.fa {
font-size: 24px;
}
ul.iconmenu li a span {
display: none;
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
}
ul.iconmenu li a:hover span {
display: block;
}