Desde que aparecieron las plantillas del Dise?ador de plantillas de Blogger muchos de los comentarios acerca de los Men?s son: que los men?s no se ven igual que al del ejemplo de equis entrada, o que las subpesta?as no se despliegan. Y la respuesta que siempre doy es Los men?s de subpesta?as no funcionan en esas plantillas.
Pero les hab?a prometido encontrar la forma de que los men?s funcionen en esas plantillas, as? que veamos c?mo hacer funcionar cualquier men? en las plantillas hechas a trav�s del Dise?ador de plantillas de Blogger.
Lo primero es entrar en Plantilla | Edici?n de HTML y SIN expandir los artilugios busca esta l?nea:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
Elimina lo que est? en color rojo.
Es posible que tengas muchas partes como la que est? en rojo, elimina todas las que encuentres.
Luego busca esta parte en la plantilla:
/* TabsY elimina todo lo que haya dentro de ello. Por ejemplo, en la plantilla Awesome Inc. eliminar?as todo lo que est? en color verde
----------------------------------------------- */
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */
Ya eliminado, en su lugar agrega lo siguiente:
#crosscol ul {z-index: 200; padding:0 !important;}Una vez hecho lo anterior podremos agregar cualquier men? y estos se ver?n como deben verse y las subpesta?as podr?s desplegarse sin problema.
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
