{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Cómo usar cualquier menú en las plantillas hechas por Blogger

Si queremos agregar un menú con subpestañas a una plantilla hecha por blogger, sea modificada o no por el diseñador de plantillas (e incluso por nosotros) este simplemente "No funciona", esto se debe a que Los menús con subpestañas no funcionan con las plantillas de blogger.

Esto se debe a que esas plantillas tienen estilos que inhabilitan cualquier otro menú que este bajo la cabecera.

La solución de este problema la encontré en el Blog del Potro "Ciudad Blogger".

Ahora veamos cómo hacer funcionar cualquier menú en las plantillas hechas por Blogger (sean o no editada por el diseñador de plantillas) en 4 simples pasos.




Paso 1: Entramos en Plantillas | Editar HTML y enseguida buscamos la linea:


<b:section class='tabs' id='crosscol'

Para hacer mas rápida la búsqueda damos clic a cualquier parte de la hoja de estilo y luego teclear Ctrl + F y nos saldrá un cuadro de búsqueda.

Paso 2: Eliminamos los class='tabs' que encontremos ya que muchas veces trae mas de una.

Paso 3: Luego buscamos esta parte en la plantilla:
/* Tabs
Y eliminamos todo lo que esta dentro de ella.  Por ejemplo en la plantilla Travel, eliminariamos todo lo que esta en verde.


/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */



Paso 4: Luego de eliminarlo, en su lugar se agrega lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}


Con estos sencillos 4 pasos podemos usar cualquier menú y este funcionara como debe ser y las subpestañas se desplegaran sin ningun problema.

10 comentarios:

  1. Hola de nuevo, ya leí tu respuesta, pero resulta que no encuentro la línea que pone que hay que buscar en el primer paso :S

    No sé como puedo cambiarlo, help porfavor!

    Un saludo y gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola que tal M, intenta buscando solamente una parte del código intenta asi :
      "<b:section class='tabs' id='crosscol'" Sin comillas, luego en el siguiente igual intenta buscar solo con "/* Tabs", si el problema continua puedes mandarme una copia de tu plantilla al correo que esta en la seccion de contactos, para descargar tu plantilla entra a "Plantilla" y en la parte superior derecha dice "Crear copia de seguridad/restablecer" y por ultimo en "descargar plantilla completa" para que te haga los cambios y te regrese la plantilla lista, solo tendrias que subirla ahi mismo donde la descargaste en Plantilla › Crear copia de seguridad/Restablecer. Saludos!

      Eliminar
  2. Alejandro muchísimas gracias, M es de Manuela jaja es que se ve que firmé así.
    Te voy a pasar la plantilla a ver si consigues solucionarmelo, es para una web hecha en blogger a un tercero y me estoy desesperando por no poder hacerlo.
    Mil gracias de antemano

    ResponderEliminar
  3. Muchas gracias por este tutorial con razón ningún menu con submenus me quedaba bien el el blog, ahora ya así. Si no te importa te enlazaré en el blog..

    ResponderEliminar
    Respuestas
    1. Me alegra te sirvio y claro muchas gracias. Un saludo

      Eliminar
  4. Hola como estan.
    Mi nombre es Romer Carrasco le mande un correo con los cogidos de la plantilla que tengo para ver si me pueden ayudar ya que no consigo el /* Tabs que ustedes están explicando en el tutorial .
    De ante mano gracias y disculpe la molestia

    De ante mano gracias y disculpe la molestia

    ResponderEliminar
  5. Hola, todo perfecto pero lo que no he podido hacer funcionar en nunguno de los menú personalizados que hay por la web, es que quede cambiado el color de fondo cuando seleccionamos el menú. Ejemplo. sel siguiente menú" Home- Servicios -(casas- pisos - locales-) Presupuesto - Contacto. En este ejemplo de 4 menú y 3 submenú. si realizo clic en presupuesto cuando paso con ratón por arriba del menú presupuesto cambia de color, pero al darle click, entra a contacto pero no cambia de color, y no se sable en que parte del menú estás. Algunos ejemplos
    http://reformasmaracena.blogspot.com.es, http://www.reformasmalaga.com.es , Si pudieras ayudarme, gracias.

    ResponderEliminar
  6. perdón quise decir que entra a presupuesto pero el color del menú no varía.

    ResponderEliminar
  7. Hola estuve buscando los códigos del comienzo y no los pude encontrar, trate buscando solo una parte del código pero no lo encontré y ya no sé que hacer -_-

    ResponderEliminar
  8. haber 1 blogger tiene fallos al buscar los texto la solucion es marcar con el raton toda la plantilla y luego buscar
    2 yo e realizado todos los pasos correctamente pero el menu se sigue viendo mal alguna idea?

    ResponderEliminar