segunda-feira, 25 de março de 2013

Como usar qualquer menu nas planilhas de Design do Blogger






Desde que apareceram as planilhas de Design do Blogger os menus com submenus não funcionam. A razão é que essas planilhas tem estilos predefinidos nesta área e desabilitam qualquer outro menu que se agregue. Para que se tenha esse submenu, é necessário seguir os seguintes passos:

Primeiro, entramos em Design / Editar HTML e clicamos em SIM expandir e busque esta linha:

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

Apague o que está em vermelho. 
É possível que se tenha muitas partes como a que está em vermelho, apague todas que encontrar. 
Depois busque esta parte na planilha: 

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


E elimine tudo que houver dentro dele. Por exemplo, na planilha Awesome Inc. eliminariamos tudo que está na cor 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 
----------------------------------------------- */



Depois de apagado, cole em seu lugar o seguinte:

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



Uma vez feito isto, podemos adicionar qualquer menu nos nossos blogs com submenus sem problemas.











1 comentários:

Willian Cleiton Ramos disse...

Muito obrigado. Consegui resolver o meu problema!! Já tava fincado louco procurando solução e não encontrando nada. Valeu!

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...