Marcadores em forma de menu suspenso

Marcadores em forma de menu suspensoPara 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:

Como personalizar o menu suspenso
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

87 comentários :

  1. Oi Fabiano, como vai?
    Menino, vc se supera a cada dia, hein?
    Adorei o novo lay... e as dicas, então, nem se fala.
    É um privilégio, tê-lo como parceiro... e mais ainda, desfrutar das preciosas dicas.

    Beijokinhas
    *

    ResponderExcluir
  2. Ótima dica, realmente. Vou ver se coloco no meu blog ;)

    Abraço

    ResponderExcluir
  3. Ai, muito obrigada por essa dica! Fiz no meu blog e deu certíssimo!

    Parabéns pelo blog!
    Abraços!

    ResponderExcluir
  4. O meu abre pra cima e não para baixo igual fala na postagem

    ResponderExcluir
  5. Alexandre
    o menu suspenso abre para o lado que tiver espaço, ou seja se ele estiver no final da pagina abrirá para cima pois não tem espaço suficiente para baixo.

    faça o teste, veja nosso arquivo é um menu, use a barra de rolagem e posicione o menu no final da pagina e depois na parte de cima e verá o que acontece

    ResponderExcluir
  6. amigo..sabe se tem jeito de tirar o marcador de perto do titulo do post?? deixar ele invisivel, ou longe do título??? ou tirá-lo de vez, e ele aparecer apenas na widget?

    ResponderExcluir
  7. na pagina layout, clique para editar as postagens do blog, lá tem a opção do que aparece ou não no blog, é só desmarcar a opção marcadores

    http://www.dicasparablogs.com.br/2009/01/organizar-postagemocultar-data.html

    ResponderExcluir
  8. Blz vou te pedir um favor no meu a setinha não mostra acho que o espaço não coube a setinha sera que tem como voce me ajudar nisso.FALOW

    ResponderExcluir
  9. Henrique
    provavelmente a coluna do seu blog não tem largura suficiente, então precisa ou aumentar a largura da coluna
    http://www.dicasparablogs.com.br/2007/08/largura-do-blog.html
    ou diminuir o menu jump(usar um tamanho menor ou textos mais curtos nos links)

    ResponderExcluir
  10. o meu nao ficou centralizado. Porque?

    ResponderExcluir
  11. O meu "arquivo do blog" também não fica centralizado de jeito nenhum!
    Alguma ajuda?

    ResponderExcluir
  12. Gui
    veja como formatar o menu jump(aquele do arquivo)
    http://www.dicasparablogs.com.br/2009/07/alterar-cores-tamanho-letra-do-menu.html

    ResponderExcluir
  13. Olá?...
    Estou com um problema no Menu Suspenço de Categorias/Marcadores...

    Como faz para remover a exibição da quantidade de postagens por marcador?

    Circuito Rede Cerebral
    www.redecerebral.blogspot.com

    ResponderExcluir
  14. veja essa postagem sobre tirar o numero de postagens que tem cada marcador

    http://www.dicasparablogs.com.br/2008/09/retirar-numero-dos-marcadores.html

    ResponderExcluir
  15. Olá,


    fiz tudo o que disseram e só teve um problema...

    a barrinha do marcador ficou um pouco larga, como faço pra reduzir ela um pouco?


    Obrigado!

    ResponderExcluir
  16. a largura da barra é definido pelo conteudo dela ou seja o tamanho do nome dos seus marcadores, veja aqui como formatar o menu
    http://www.dicasparablogs.com.br/2009/07/alterar-cores-tamanho-letra-do-menu.html

    ResponderExcluir
  17. Muito bom, obrigado.

    Eu gostaria de saber onde esta os códigos do widget "marcadores e "arquivos do blog" para que eu possa personaliza-los e adiciona-los usando em um elemento de pagina "HTML/Java Script"

    Poderia me ajudar?

    Obrigado

    ResponderExcluir
  18. Pedro Cabral Blog
    tem que adicionar o gadget normalmente pela pagina layout(marcadores ou arquivo), depois entrar no editar html e clicar para expandir o modelo, então pode personalizar esses itens

    ResponderExcluir
  19. E aew Fabiano blz?

    Gostaria de saber como mudar as fontes e letras dos marcadores em menu jump.

    Agradeço desde ja.

    ResponderExcluir
  20. veja aqui como personalizar o menu jump
    http://www.dicasparablogs.com.br/2009/07/alterar-cores-tamanho-letra-do-menu.html

    ResponderExcluir
  21. Então,
    fiz tudo direitinho, mas não consegui ver diferença....

    ResponderExcluir
  22. Primeira Opção
    seus marcadores ficaram igual ao nosso guia rapido? se não ficou é pq fez algo de errado.

    ResponderExcluir
  23. Ola Fabiano sou dono de um blog com mitos marcodores,gostaria muito de bota esse codico mais infelizmente não consegui.!!

    Mais vlw pela postagem.

    ResponderExcluir
  24. Ewerton, tente fazer novamente e tenha cuidado com os detalhes essa parte do código qualquer coisa a mais ou faltando faz não funcionar.

    ResponderExcluir
  25. Valeu a super dica Fabiano,eu ja não sabia mais o que fazer com minha enorme lista de marcadores.

    ResponderExcluir
  26. oi! infelizmente minha lista de marcadores continuou do mesmo jeito!
    não ficou suspendido!

    ResponderExcluir
  27. de primeira o meu não funcionou...!
    mas depois percebi que pra funcionar... devia está marcada a opção lista... e não cloud no gadget dos marcadores!

    ResponderExcluir
  28. Eu gostaria de colocar um menu suspenso tipo o que vc tem aqui no seu blog (tipo abas amarelas). O código seria diferente? Vc tem algum passo a passo que possa me orientar? Obrigada rosemerlim07@yahoo.com.br

    ResponderExcluir
  29. comesso a suspeita que esses cara não sabem ler.

    para mudar o tamanho esta nos camentarios.

    para mudar a cor esta nos comentarios.

    para retirar o numero de postagens do marcado ta no post so ler.

    ResponderExcluir
  30. Idéias e Artes
    só precisa colocar o código da cor no código que mostramos.
    Código das Cores

    ResponderExcluir
  31. Olá, então, coloquei essa ferramenta no meu blog, ele é de piadas, e vc sabe que piadas são muito os generos, o problema era que os marcadores estavam ocupando muito espaço da minha sidebar, por isso, com menu suspensou fica melhor, mas na boa, será que isso não pode atraplhar um pouco no blog não?? Acho que fica mais dificil para as pessoas verem as piadas, mais escondido, não acha? Só tô com isso na cabeça, não sei, tenho medo de atraplhar. Abs!

    ResponderExcluir
  32. Clube da risada
    o melhor é fazer testes, ou seja faça a alteração e veja se nota alguma diferença depois de alguns dias(uma semana) então avalie se deve deixar a alteração ou desfaze-la.

    ResponderExcluir
  33. Oii, adorei o site e a dica!
    Funcionou direitinho!!!

    Muito Obrigada!!
    beejo

    ResponderExcluir
  34. Tem uma duvida,pq não sou tão bom em blogger como aqui do site,mas eu queria saber como faz para colocar postagens nesses marcadores,
    por exemplo:

    tem o marcador A

    ai quero colocar postagens nele.Entendeu?

    Muito bom site,me ajudando muito

    ResponderExcluir
  35. Pow Brother
    vc tem ótimas dicas aki heim
    fiz essa aki e deu certo !!! \o/
    Só q tem um porém... =/
    ficou muito Grande o menu suspenso... =/
    tem como eu diminuir o tamanho dele ???
    pois está saindo fora a coluna lateral do meu Blog !!!
    Grato desde já
    contato limpesuamente@hotmail.com

    ResponderExcluir
  36. a largura do menu depende do conteudo dele, ou seja do tamanho do texto de cada item

    ResponderExcluir
  37. Como sempre não é Fabiano!!!

    Deu certo meu filho!!!

    Eu queria te pedir uma coisa:

    Por favor me fala um site onde você criar um banner em flash e quando você acaba de criar ele te dá um código HTML, é possível?


    OBG esperando resposta!!!

    ResponderExcluir
  38. Vlw pela dica...
    No blog deu tudo certo...
    Porem queria saber se tem como centralizar o menu suspenso..

    ResponderExcluir
  39. era isso q eu tava querendo saber em outros posts

    vlwww
    mt bom

    ResponderExcluir
  40. Comoo já disse , exelente dicas . Queria saber se tem como fazer as postagens populares como menu suspenso ? Se puder ajudr Agradeço !!

    vlww

    ResponderExcluir
  41. Anônimo
    gostei da sua idéia farei uns testes e assim que for possível vou publicar como fazer as postagens mais populares em forma de menu

    provavelmente semana que vem está aqui no dicas para blogs

    ResponderExcluir
  42. Ola instalei dois menus suspenso no meu blog fui instalar o terceiro e deu erro e apareceu a seguinte mensagem, (Mais de um item encontrado com o id: Image74 Os IDs de itens devem ser únicos e exclusivos.) não entendo muito de html gostaria de ajuda.

    Agradeço

    ResponderExcluir
  43. Anonimo, provavelmente você copiou o id de um gadget e repetiu, você estava mexendo na pagina editar html...

    cada gadget é unico para adicionar novos tem que usar a pagina designer

    ResponderExcluir
  44. Fabiano, tentei desfazer o procedimento depois de algum tempo usando em um blog. Fiz exatamente o caminho inverso para voltar ao que era anteriormente.
    Resultado: colocando em "lista", não aparece mais o número de marcadores. Só aparece se eu colocar em "nuvem". Mesmo clicando em mostrar o número de marcadores, ele não aparece. Você pode me ajudar?

    ResponderExcluir
  45. no gadget dos marcadores tem a opção de mostrar ou não a numeração

    ResponderExcluir
  46. Fabiano, mesmo clicando para mostrar a numeração, ela não aparece mais. Esse é exatamente o problema.

    ResponderExcluir
  47. Encontrei um caminho que solucionou o problema. Baixei para o meu blog teste o mesmo modelo do meu blog original. Copiei do blog teste todo o código referente a esse gadget e colei no blog original (é claro que, antes, retirei o código com erro).
    PRONTO! TUDO CERTO!
    Abraços.

    ResponderExcluir
  48. A largura da caixa da guia fica quase ultrapassando a linha da sidebar. Tem como arrumar?

    ResponderExcluir
  49. Valeu, cara!!!
    Ótima dica!

    ResponderExcluir
  50. EI MANO = MEU BLOGGER NAÕ TEM NENHUMA PARTE DESSAS SE VC QUIZEREM EU PASSO O MODELO PRA VCS AGEITAR - VLW - MIM ADD NO MSN PORQUE TENHO DUVIDAS

    ResponderExcluir
  51. Rhamon Downloads
    não uso MSN para assuntos relacionados com blogs.. são muitas pessoas que falam nisso mas seria impossivel atender a todos

    ResponderExcluir
  52. Valeu, bela dica! Já estou usando

    ResponderExcluir
  53. Ufa este consegui fazer, achei bem mais fácil deste jeito. Grata pelas dicas maravilhosas :D

    ResponderExcluir
  54. obrigado, consegui fazer com facilidade e sem erro
    grato www.crbdownloads.com

    ResponderExcluir
  55. Fabiano,
    vou tentar colocar o menu suspenso nos marcadores.
    Estou levando,bjus

    ResponderExcluir
  56. Fabiano,
    consegui colocar os marcadores deu certinho.
    Obrigada,
    Lido domingo para vc,bjus

    ResponderExcluir
  57. Parabéns pelo site, Funcionou direitinho.

    XD

    ResponderExcluir
  58. Consegui colocar esse menu suspenso em 3 marcadores, Label1, Label2 e Label3. Gostaria de saber apenas como trocar a cor de fundo do item selecionado, que é azul e eu queria laranja ##FFA500, com a letra do jeito que está mesmo. Tentei olhar os outros tutoriais mas nenhum tirou minha dúvida. Grata...Elis.

    ResponderExcluir
  59. Elis Culceag
    acho que não tem como fazer essa diferenciação no marcador usando o menu jump.

    não estou dizendo que é impossivel (alias dizer isso na internet é piada), mas que não tenho os códigos e acho que seria complicação demais e muitas chances de erros de html.

    ResponderExcluir
  60. Com o diminuo a largura da lista? por exemplo no meu site tem muitos seriados ai fiz a lista mas a barra de categorias pe mais pequena do q o tamanho da lista queria diminuir a lista olha ai www.downloadsleos.tk qual codigo acrescento?

    ResponderExcluir
  61. Leo's
    não tem como alterar porque o tamanho da lista depende dos itens que estão nela

    ResponderExcluir
  62. Muito obrigado pela dica!!!

    Funcionou muito bem...

    Estava com dificuldade de achar espaço para os marcadores na tela do blog, agora ficou limpa a tela do blog.


    Ajudou muito!!!

    ResponderExcluir
  63. o que seria da minha vida de Blogueiro sem voce parabens belo trabalho você é um santo vive fazendo milagres> Hum

    ResponderExcluir
  64. Amigo meu blog cada dia fica mais lindo com sua ajuda eu ando fazendo ate blog pros amigos graças a vo^ce bjs ai no coração fica na paz irmão.

    ResponderExcluir
  65. Fabiano,eu que levei o menu suspenso.
    Apagar trecho no html do blog fiquei gelada...mas consegui.
    Obrigada valeu,bjs

    ResponderExcluir
  66. Como faço para tirar determinados marcadores ?

    EX :
    Sites Úteis
    Template
    Tumblr
    Twitter
    Video Aula

    Eu quero tirar 'Twitter' dos meus marcadores do menu suspenso, como faço para tirar ?

    ResponderExcluir
  67. tem que editar o gadget do marcador para mostrar apenas os marcadores que você escolher

    ResponderExcluir
  68. Oi Fabiano, adorei a postagem, e seguindo as outras sugestões de leitura e vendo as duvidas dos outros seguidores, ainda dei umas modificadas e até arredondei os cantos,ficou lindo, ameeei

    ResponderExcluir
  69. Cara, fazia muito tempo que eu estava procurando por isso... Já fiz e ficou perfeito.
    Valeu.

    ResponderExcluir
  70. Fabiano,eu aqui de novo.
    Querido estou levando os marcadores e vou levar barra de rolagem também.
    Lindo fim de semana,bjs

    ResponderExcluir
  71. com a mudança do layout do blogger, como eu faço pra encontrar esse codigo agora?

    antes a gente marcava uma opção pra aparecer todo o codigo, hj em dia nao tem essa opção, entao não consigo encontar mais esse codigo ;/

    me ajuda aí

    ResponderExcluir
  72. Fabiano preciso de uma ajuda sua

    meu menu até ta ficando suspenso, mas nao tá abrindo...pq isso? ;/

    ResponderExcluir
  73. Humor no Face na hora de alterar o código você deve ter apagado algum código por engano ou deixou faltando algo, mas não tenho como saber o que é.

    a parte boa é que pode excluir o gadget dos marcadores e colocar novamente assim o código volta ao padrão do Blogger e você pode tentar novamente.

    com certeza o erro foi algum detalhe como sinal faltando > / = ... note que " é diferente de ' e as vezes misturamos os sinais e isso também gera erro.

    ResponderExcluir
  74. Fabiano... Tem como me orientar para fazer uma barra de marcadores de menu suspenso como neste site?
    http://daquidali.com.br/

    ResponderExcluir
    Respostas
    1. você pode criar um submenu usando os links dos marcadores do seu blog, mas tem que ser feito manualmente em html acho que não dá para fazer diretamente com o gadget marcadores.

      veja aqui sobre Criar e Colocar um Menu com SubMenu com CSS no Blog

      Excluir
  75. Filho... Tem como criar um marcador em forma de calendário?

    ResponderExcluir
  76. vou pesquisar sobre isso, mas por enquanto não tenho o código do calendário

    ResponderExcluir
  77. Brigadim por tudo.
    Vc é um abençoado por Deus
    Vou aguardar!!!

    ResponderExcluir
  78. Fabiano... Socorro!
    Estava justamente tentando tirar a numeração
    com essa parte () e apaguei todas as
    tres vezes, mas somente a parte de dentro do parênteses
    deixando os parênteses. Porém ficou feio pois, aparecia assim ()
    em todos os marcadores.
    Então voltei e apaguei os parênteses e agora travou tudo!!!
    Aparece um aviso sobre Script...
    Só que eu não sei depurar Script..
    E agora?

    ResponderExcluir
    Respostas
    1. infelizmente se apagou algo por engano no seu template e não tiver feito um backup do template não será possível recuperar.

      caso tenha outro blog entre no html dele e copie o trecho do código dos marcadores (label1) e cole no lugar deste que está dando erro.

      Excluir