Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL BLOGGER: CÓMO PONER UN MENÚ DESPLEGABLE EN NUESTRO BLOG
#1
Vamos a Diseño y añadimos un gadget HTML/Javascript, dentro pegamos el código que os dejo a continuación y lo ubicamos en la parte superior, debajo de la cabecera (si la tuviéramos ubicada así):

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='URL'>Pestaña1</a></li>
<li>
<a href='#'>Pestaña desplegable 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>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>
<li>
<a href='#'>Pestaña desplegable 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>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>
<li><a href='URL'>Pestaña 2</a></li>
</ul>
</div>
</div>

• Donde debemos añadir las URL correspondientes y cambiar el texto que queremos que tengan las pestañas y subpestañas.

• Si os fijáis, en las pestañas que son desplegables, aparece un corchete, este hace que no se redireccione a ningún sitio, pero si queréis que sí lleve a algún sitio de vuestro blog, eliminadlo y poned la URL.

• Cada elemento del menú está entre <li> elemento </li>, para añadir una pestaña normal, sólo debemos añadir este código:

<li><a href='URL'>Pestaña</a></li>

En cambio para una pestaña con subpestañas:

<li>
<a href='#'>Pestaña desplegable</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 4</a></li>
</ul>
</li>

Y para añadir subpestañas dentro, añadiremos (siempre dentro de <ul> ... </ul>:

<li><a href='URL'>Subcategoría 1</a></li>

Es importante que siempre respetemos las etiquetas li, cada elemento del menú debe estar entre <li> y </li>


Ahora vamos a darle estilo a nuestro menú. Para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código, donde modificaremos lo que os he dejado con color:



/* Menu desplegable

----------------------------------------------- */

.tabs-inner .section:first-child ul { margin-top: 0px;}

.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/

background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/

text-decoration: none;

}

.tabs .widget li, .tabs .widget li{ display: inline; float: none;}



#NavMenu {

position: relative;

margin: 0 auto;

padding: 0;

border-top: 1px solid #333333; /*Borde superior del menú, si no queremos borramos la línea*/

border-bottom: 1px solid #333333; /*Borde inferior del menú, si no queremos borramos la línea*/

background: #333333; /*Color de fondo del menú, si no queremos borramos la línea*/

}

#NavMenuleft {

width: 800px; /*Ancho del menú*/

float: none;

margin: 0 auto;

padding: 0;

}

#nav {margin: 0 auto; padding: 0; background:transparent;}



#nav ul {

float: none;

list-style: none;

margin: 0;

padding: 0;

overflow: visible;

}

#nav li a, #nav li a:link, #nav li a:visited {

font: normal normal 14px Arial; /*Tamaño y tipografías de las pestañas */

color: #666666; /*Color del texto de las pestañas*/

display: block;

margin: 0;

padding: 10px 15px 10px;

}

#nav li a:hover, #nav li a:active {

color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/

margin: 0;

padding: 10px 15px 10px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/

background: #eeeeee; /*Color del fondo de las subpestañas*/

width: 150px; /*Tamaño de éstas*/

color: #333333; /*Color del texto de las subpestañas*/

float: none;

margin: 0;

padding: 7px 10px;

}

#nav li li a:hover, #nav li li a:active {

background: #ffffff; /*Color del fondo de las subpestañas al pasar el ratón por encima*/

color: #222222; /*Color del texto de las subpestañas al pasar el ratón por encima*/

padding: 7px 10px;

}

#nav li {

float: none;

display: inline-block;

list-style: none;

margin: 0;

padding: 0;

}

#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }

#nav li ul a { width: 140px; }

#nav li ul ul { margin: -32px 0 0 171px; }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }

#nav li:hover, #nav li.sfhover {position: static;}

.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Ayuda! Dominio Blogger NixonJ1 17 1,300 23-01-2017, 07:35 PM
Último mensaje: Vicen
  Ayuda! Dominio Blogger NixonJ1 1 447 22-01-2017, 04:19 PM
Último mensaje: Vicen
Pregunta Blogger Vs Wordpress oswaldo 14 1,227 02-01-2017, 11:35 PM
Último mensaje: onspot
  Las 5 mejores plataformas online para crear tu propio blog gratis (1º Parte) Netohg 37 4,889 02-04-2016, 05:22 AM
Último mensaje: ghmillet
  TUTORIAL BLOGGER: ENMARCAR EL BLOG inguzca 0 1,195 07-02-2016, 09:04 PM
Último mensaje: inguzca
  DOMINGOS MOLONES: COLABORACIÓN CON VELVET CAT (FREEBIES + TUTORIAL BLOGGER) inguzca 0 428 07-02-2016, 09:03 PM
Último mensaje: inguzca
  FREEBIES: BOTONES DE SUBIR PARA NUESTRO BLOG (Y TUTORIAL BLOGGER) inguzca 0 616 07-02-2016, 08:58 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: PERSONALIZAR EL MENÚ DE PÁGINAS inguzca 0 501 07-02-2016, 08:57 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO HACER UN MENÚ POR CATEGORÍAS inguzca 0 423 07-02-2016, 08:55 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UN BUSCADOR EN LA BARRA SUPERIOR inguzca 0 941 07-02-2016, 08:53 PM
Último mensaje: inguzca



Usuarios navegando en este tema: 1 invitado(s)