C?mo usar cualquier men? en las plantillas del Dise?ador de Plantillas de Blogger

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.

La raz?n es que esas plantillas tienen estilos predefinidos en esa ?rea que inhabilitan cualquier otro men? que se agregue debajo de la cabecera.

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:

/* Tabs
----------------------------------------------- */

Y 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;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

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.