Cómo usar cualquier menú en las plantillas hechas con el diseñador de plantillas de Blogger

Tomando fragmentos en esta entrada gentilmente de ciudadblogger.com

Para aquellas personas que usan plantillas elaboradas con el diseñador de Plantillas de Blogger han llegado a darse cuenta que a la hora de implementar un menú fuera de los que se hace con el diseñador ven que no es posible y muchos comentarios 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. 

Bueno la razón precisa es que estas plantillas tienen estilos predeterminados o predefinidos en área que inhabilitan cualquier otro menú por poner.

Para solucionar este tipo de problemas y hacer que cualquier menú funcione en su plantilla creada con el diseñador de plantillas deberán hacer lo siguiente:

Lo primero es entrar en Plantilla | Editar HTML y buscan esta línea: 

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Eliminan lo que está en color rojo, es posible que se topen con muchas partes como las que están en color rojo así que eliminen todas las que les muestre hasta que no quede ninguna.

Luego buscan esta parte de la plantilla:

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

Luego eliminen 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 fuera o eliminado en su lugar pondrán el siguiente código:

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

Y esto sería todo, con esto ya podrán agregar cualquier menú en su plantilla de blogger así se encuentre hecha con el diseñador de plantillas, hasta un próximo post.