TUTORIALES DE BLOGGER: CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALES

AÑADIR EL HTML

Lo 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:

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

<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 CSS

Ya 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>

CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALES

No hay comentarios: