OK! bloggers en este tutorial veremos como agregar iconos fuentes a un menú de forma simple. En una entrada pasada vimos como agregar iconos fuentes, vimos como agregarlos en botones y hoy veremos
como agregarlos en un menú, también vimos como agregar menús con imágenes PNG, aunque siempre es un poco mejor por que tienen otro efecto y son coloridos, ya dijimos que las imágenes hacen que el blog demore en su carga. Ya dicho todo esto comencemos:
Veremos una demostración en vivo:
Demo
Comencemos:
- Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
<head>
- Paso 3: Justo por debajo de <head> pegamos la siguiente linea (Ctrol + F)
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
- Paso 4: Ahora en la plantilla buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
- Paso 5: Just por encima de ]]></b:skin> pegamos el siguiente código CSS
#site-nav {background-color:#333}
.index #site-nav {border-bottom:1px solid #222;}
#site-nav ul,
#site-nav li {
margin:0;
padding:0;
list-style:none;
height:35px;
}
#site-nav li {
float:left;
display:inline;
position:relative;
height:auto;
}
#site-nav a {
display:block;
line-height:35px;
border-left:1px solid #444;
border-right:1px solid #222;
color:#aaa;
text-decoration:none;
padding:0 1.8em;
}
#site-nav li.depan a {border-left:none}
#site-nav li a:hover,
#site-nav li:hover > a {color:#666}
- Paso 6: Guardamos los cambios realizados y ahora agregaremos el menu en un gadget
Para eso seguimos estos pasos
- Paso 1: Vamos a Blogger>> Diseño>> Añadir un gadget>> HTML/Javascript
- Paso 2: Dentro del Gadget pegamos el codigo HTML del menu.
<nav id="site-nav"><ul>
<li><a href="URL"><i class="fa fa-home"></i> Menu 1</a></li>
<li><a href="URL"><i class="fa fa-cog"></i> Menu 2</a></li>
<li><a href="URL"><i class="fa fa-search"></i> Menu 3</a></li>
<li><a href="URL"><i class="fa fa-bell"></i> Menu 4</a></li></ul></nav>
- Paso 3: Guardamos nuestro gadget.
*Recuerda que <i class="....."></i> es nuestro icono fuente
*Para agregar otro menu solo debes de agregar <li><a href="URL"><i class="fa fa-cog"></i> Otro menu</a></li>
Para mas iconos ir aquí
Nota:- Solo debes de cambiar lo que esta en Rojo por el titulo del menu
Comentarios (0)
Instrucciones Para omentar
Incertar Enlace
Utilice el codigo
<a href='LINK'> EJEMPLO </a>Cargar Imagen
[img] LINK_ANH [/img]-Use el codigo para cargar una imagen.Formato Word
<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike>
texto tachado</strike>Insertar un Fragmento de codigo
Primero use esta herramienta para codificar el codigo que quiera agregar.
CerrarLuego utilice el codigo
[code] CODIGO HTML [/code]