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>
<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.
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;
}
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
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos