Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1506246005
Vida do cache: 1506289205
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

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



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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

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

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