Marcadores em forma de menu suspenso

 

 

Enviado para você por Penha através do Google Reader:

 

 

Marcadores em forma de menu suspenso

via Dicas para Blogs de Fabiano Roberto em 05/04/09

Para colocar os marcadores do blog em um menu suspenso, menu de salto ou por qualquer outro nome que você conheça, mas é a forma de menu que a maiorias dos blogs usa para seus arquivos. Entre na página editar HTML, clique para Expandir modelos de widgets e procure pelo código dos seus marcadores (procure pelo titulo que usa neles é mais fácil identificar, no caso deste blog procuramos por guia rápido). Você vai encontrar algo assim:

<b:widget id='Label1' locked='false' title='Guia Rápido' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Então apague esse trecho:

<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>

Depois coloque esse aqui no lugar, onde está escrito Guia Rápido troque pelo que desejar que apareça no menu quando ele aparecer no blog, outro detalhe é tirar a parte (<data:label.count/>) se não quiser mostrar o numero de postagens de cada item do menu.

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Guia Rápido</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Queremos lembrar que nas partes onde viu escrito Guia Rápido é o nome que usamos nos marcadores deste blog então isso não tem nada a ver com o código, pode ser o nome que você quiser. E sempre é bom dizer para salvar uma cópia do código antes de começar a mexer no html do seu blog assim em caso de algum problema ficará fácil voltar ao modelo que estava antes.

Veja também:
Colocar barra de rolagem nos marcadores
Usar uma imagem ao lado dos marcadores do blog
Tirar o numero de postagem que aparece ao lado de cada item

 

 

Coisas que você pode fazer a partir daqui:

• Inscrever-se no Dicas para Blogs usando o Google Reader
• Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos

 

 

Share

Share |