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.
poner-barra-superior-desplegable-blogger
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='"loading" + 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 ;)
Tutorial Blogger: Cómo poner una barra superior con menú desplegable e iconos sociales 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.

Revista Blog

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

Sobre el autor

Sus últimos artículos

Dossiers Paperblog

Revistas

LA COMUNIDAD BLOG

JUEGOS EN ES.PAPERBLOG.COM