![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFKPs8R7MH1hxsWIJ_mYVYhsNmJv99pJX-9ohnp8tRcmESW8pKgmBhUcRGGzPIoFHACeafc2_9oClIgEN6II-0ihafh4eC_yzthPt_ZdsKDg_i-CoVs_lJp4c6Ja2bVkFRDORAt81L1Cb/s200/menu-iconos.jpg)
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
En breve les contestaremos