-->

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"><span class="fa fa-home"></span>Inicio</a></li>
<li><a href="ENLACE_2"><span class="fa fa-atlas></span>Mapa del Sitio</a></li>
<li><a href="ENLACE_3"><span class="fa fa-imagen"></span>Imágenes</a></li>
<li><a href="ENLACE_4"><span class="fa fa-envelope"></span>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;
}

Guardamos y listo

Publicar un comentario

0 Comentarios