Menu para Plantillas de diseñador Blogger

Vamos a realizar un menú desplegable dentro de nuestra plantilla de diseñador  de Blogger esto si en verdad queremos algo distinto, sabemos que muchas de las plantillas están predifinidas y que no aceptarían ningún código ajeno al que se tendría ya por defecto, pero haremos lo siguiente como lo mencionaba mi amigo "el potro" de ciudad  blogger ya que podría hacer funcionar un menú dentro de cualquier cabecera, vamos a ver un ejemplo de un menú con subpestañas:

 para entrar a este punto haremos lo siguiente:

Vamos a entrar a nuestro editor de plantilla estando dentro haremos lo siguiente

Buscamos la pestaña Diseño * Edición de HTML, recuerden al llegar a este punto no expandir los artilugios.

Dentro de la plantilla buscamos la siguiente linea:

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

 Vamos a eliminar la parte de color rojo.

Ahora Buscamos en la plantilla lo siguiente:

/* Tabs

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

Al encontrarla proseguimos a eliminarla.
Un ejemplo en la plantilla Awesome Inc. Eliminaras todo lo que esta en color verde del siguiente código:

/* 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 que eliminemos esa linea, agregaremos en su lugar el siguiente código:

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

Una vez hecho lo anterior proseguimos a agregar cualquier menú y estos se verán como deben verse y las subpestañas podrán desplegarse sin ningún problema.

Posted in: Blogger