Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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í 

Mas iconos fuentes
Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tu blog
Nota:-  Solo debes de cambiar lo que esta en Rojo por el titulo del menu
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

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.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar