Marcadores em menu suspenso select no Blogger

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Muitas vezes usamos muitos marcadores em nosso blog, fica difícil até organizar uma lista enorme dessas no layout do blog, por isso há uma saída simples e elegante: Usar os marcadores em forma de menu suspenso (select em HTML).

Antes de começar a instalar o widget em seu blog, faça backup do template e lembre-se que é necessário já usar categorias (marcadores) em suas postagens e o widget na sidebar do seu blog.

1) Apos fazer backup do template, entre em “Modelo” -> “Editar HTML”;

2) Clique em “Prosseguir” e marque a caixa “Expandir modelos de widgets”;

3) Procure (Ctrl + f) por:

<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>

4) Apague o 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>

5) Coloque no lugar:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecione um marcador</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
</option>
</b:loop>
</select>

6) Teste clicando em “Visualizar”, se tudo deu certo e ficou como deveria ficar, clique em “Salvar Modelo”.

Como você viu, é muito simples! É só seguir os passos.
Caso queira tirar o menu select, faça o procedimento reverso ou restaure o backup feito anteriormente.

Espero que gostem do resultado.

Fonte: Dicas para Blogs

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn