Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Blogger

Marcadores em menu suspenso select no Blogger

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

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

9 Comentários

  1. tehteh disse:

    não entendi absolutamente nada.

  2. Valeu d+. Ajudou muito. Sempre tinha procurado isso e nunca achava.

  3. minimorsa disse:

    Olá, gostaria de por um menu desse estilo em posts em série, mas quando coloco o link, ele é desconsiderado no html.
    Por exemplo:
    Como fiz:

    Selecione um marcador
    Facebook

    Como fica:

    Selecione um marcador
    Facebook

    e se clico ele modifica o link do post ficando:
    “http://gooosgle.blogspot.com/AAAA/MM/nome-da-opção”

    Estou formatando errado ou esse não é o código certo para fazer um menu suspenso com links?
    Grato

    Equipe do Goosgle

    • minimorsa disse:

      corrigindo
      era para ser assim o código:

      <select onchange=”location=this.options[this.selectedIndex].value;”>
      <option>Selecione um marcador</option>
      <option><a href=”http://facebook.com/”>Facebook</a></option>
      </select>
      e ficou assim:

      <select onchange=”location=this.options[this.selectedIndex].value;”>
      <option>Selecione um marcador</option>
      <option>Facebook</option>
      </select>

  4. Ben disse:

    não encontrei o codigo pelo ctrl e f

  5. renato satriani disse:

    nao encontrei ctrl + f

  6. Ben disse:

    alguém pode mim ajudar, ainda não conseguir colocar isso no meu blogger

  7. coloquei certinho mais não funcionou não

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.