quinta-feira, 11 de agosto de 2011

Gadget de categorias em um menu deslizante



Se quisermos que as categorias se mostrem dessa forma:








Para isso basta irmos em Desing > Editar HTML, marcar a caixinha expandir modelos de widget e procurar pelo código:


<ul>
<b:loop values='data:labels' var='label'>
<li>
....
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>


Apague-o e no lugar cole este:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione uma categoria</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Você pode alterar o texto Selecione uma categoria no lugar indicado. Se não quiser que apareça o número de postagens por categoria apague  ocódigo em amarelo.


Você também pode alterar as cores do texto e de fundo, para isto basta colar o código abaixo acima de ]]> < /b:skin> :


.menu-etiquetas {
background-color: #CEE3F6; /* Cor de fundo */
color: #000000; /* Cor do texto */
}


Altere as cores nos locais indicados, no exemplo teremos um fundo azul claro e fonte preta.


2 comentários:

Anônimo disse...

como tirar aquela barra que fica abaixo das psotagens no blogger acima do nome inico vc sabe se sousber faça um apostagem a respeito.

P disse...

Boa dica. Funcionou. Obrigada.

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...