Tutorial Blogger: Cómo poner una barra superior con menú desplegable e iconos sociales

Buenos días de miércoles lavanderos!!
Antes de nada, quiero daros millones gracias por todo el apoyo recibido, he pasado unas semanas chungas pero ya está todo mejor y vuelvo con más ganas que nunca. He echado un montón de menos el blog y a vosotros. Por eso estos días voy a publicar más que de costumbre para que recuperemos el tiempo perdido.
Sobre el curso de Ps, lo retomaremos ya la semana que viene con fuerza ;) Además, también la semana que viene tendremos un montón de sorpresas por esos 2200 que casi somos en facebook, y porque está cerca la Navidad y me pirra! :D
Hoy vamos a aprender a hacer una barra superior (cómo la que aprendimos aquí) pero que además el menú que lleva incorporado sea desplegable. También vamos a usar como iconos sociales los que nos proporciona font awesome (hablamos sobre ello aquí) para ver más aplicaciones de los mismos.

He creado un blog para que podáis ver cómo queda exactamente y de esta forma seguro que os es más fácil seguirlo.
>> VER DEMO
AÑADIR EL HTMLLo primero de todo es ubicar el menú en la plantilla del blog. Para ello vamos a Plantilla → Editar HTML (recordad hacer una copia de seguridad de la plantilla) y buscamos lo siguiente:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Justo debajo de ello pegamos este código:
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li><li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
</ul>
</div>
Vamos a ver un poco cómo funciona y cómo añadir o cambiar cosas:
• Para poner los enlaces que queráis, debéis sustituir donde pone URL por la dirección. 
• Como podéis observar, hay apartados del donde el href='URL' no está, en concreto, donde dice Categoría 1 y Categoría 2, esto es porque se trata de una pestaña desplegable con subpestañas. Si queréis que estas también lleven a una dirección sólo debéis añadir el href='URL' después de <a 
• Lo que está en azul es el nombre que lleva cada pestaña y que tenéis que cambiar por el que queréis que ponga. Lo que está en verde, es el nombre de cada subpestaña.
• Si queréis añadir una nueva pestaña, basta con pegar esto después de otra (el final de una pestaña siempre es </li>):<li><a href='URL'>Página X</a></li>
• Pero si lo que queréis es añadir una pestaña con suspestañas debéis añadir esto otro:<li><a>Categoría X</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
• Y si dentro de esa pestaña con subpestañas queréis añadir una nueva subpestaña, quedaría así:<li><a>Categoría X</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li><li><a href='URL'>SubCategoría añadida</a></li>
</ul>
</li>
Como veis es muy sencillo añadir o quitar cosas, siempre debemos tener en cuenta que todo lo que está en la etiqueta <li> código </li> es un elemento del menú.
> CON ICONOS SOCIALES
<div id='barra-superior'>
<ul class='menu'>
<li><a href='URL'>Página 1</a></li>
<li><a>Categoría 1</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li>
<li><a>Categoría 2</a>
<ul>
<li><a href='URL'>SubCategoría 1</a></li>
<li><a href='URL'>SubCategoría 2</a></li>
<li><a href='URL'>SubCategoría 3</a></li>
</ul>
</li><li><a href='URL'>Página 2</a></li>
<li><a href='URL'>Página 3</a></li>
<li><a href='URL de la red social'><i class="fa fa-facebook"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-twitter"></i></a></li>
<li><a href='URL de la red social'><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
Como veis, para ello hemos usado los iconos de font awesome, en esta entrada os explicaba todo, pero lo único que aquí tenemos que tener en cuenta, es:
• Añadir esto en nuestra plantilla justo debajo de <head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
• Y tener en cuenta el catálogo de iconos que nos proporciona font awesome y que podéis ver aquí.
AÑADIR EL CSSYa sólo queda darle estilo a nuestro menú y que quede perfecto, para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código (ya sabéis que lo que está de color es lo que debéis cambiar):
*{
margin:0px;
padding:0px;
}
#barra-superior {
margin:auto;
width:100%;
background:#333333; /*Color de fondo de la barra*/
height:40px; /*Anchura de la barra*/
border-bottom: 4px solid #adbcdc; /*Línea de debajo del menú, si no queréis borrad esta línea*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:1000px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal normal 14px Arial; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:10px 30px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #cccccc; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #adbcdc; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff;  /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #333333; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #adbcdc; /*Color de las letras de las subpestañas*/
font:normal normal 14px Times New Roman; /*Tamaño y tipografía de las subpestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
}
.menu li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #ffffff; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}
Y ya está, sólo queda que la personalicéis a vuestro gusto y tendréis vuestra barra con menú desplegable e iconos sociales ;)
Antes de terminar dos cosas:
• Para que el menú quede bien centrado, hay que ir jugando con el valor que os he dejado en rojo, hasta que encontréis la medida perfecta de vuestro menú.
• Últimamente blogger está fallando en el apartado para añadir CSS, si es así, y veis que al pegar todo el código no os sale nada, no preocuparse, pegadlo directamente en la plantilla. Para ello vais a Plantilla → Editar HTML y buscad esto:
]]></b:skin>
Entonces justo arriba pegáis todo el código, lo personalizáis y listo ;)
Me despido de vosotros hasta mañana y volviendo a agradeceros todo el cariño, os había echado muchísimo de menos!! :D
Espero que os guste el tutorial y que lo compartáis mucho, que para mí eso es muy importante y me anima a hacer más y más cosas ;)
Pasad un miércoles muy chachi!! Besotes muy fuertes!! Laura.