Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL BLOGGER: CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALE
#1
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.

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:

<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 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 Guiño

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:


]]></bConfundidokin>


Entonces justo arriba pegáis todo el código, lo personalizáis y listo Guiño


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Ayuda! Dominio Blogger NixonJ1 17 1,152 23-01-2017, 07:35 PM
Último mensaje: Vicen
  Ayuda! Dominio Blogger NixonJ1 1 402 22-01-2017, 04:19 PM
Último mensaje: Vicen
Pregunta Blogger Vs Wordpress oswaldo 14 1,061 02-01-2017, 11:35 PM
Último mensaje: onspot
  GRAFICAS DE BARRA Y LINEAS EN JAVASCRIPT (LIBRERIA CHART.JS) khristia 4 683 01-12-2016, 10:11 PM
Último mensaje: zeuz
  FREEBIE: ICONOS PARA REDES SOCIALES + INSTALACIÓN inguzca 7 763 25-03-2016, 06:56 AM
Último mensaje: garcon
  TUTORIAL BLOGGER: ENMARCAR EL BLOG inguzca 0 1,128 07-02-2016, 09:04 PM
Último mensaje: inguzca
  DOMINGOS MOLONES: COLABORACIÓN CON VELVET CAT (FREEBIES + TUTORIAL BLOGGER) inguzca 0 407 07-02-2016, 09:03 PM
Último mensaje: inguzca
  FREEBIES: BOTONES DE SUBIR PARA NUESTRO BLOG (Y TUTORIAL BLOGGER) inguzca 0 576 07-02-2016, 08:58 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: PERSONALIZAR EL MENÚ DE PÁGINAS inguzca 0 470 07-02-2016, 08:57 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO HACER UN MENÚ POR CATEGORÍAS inguzca 0 388 07-02-2016, 08:55 PM
Último mensaje: inguzca



Usuarios navegando en este tema: 1 invitado(s)