14 de novembro de 2009

Criar um Mapa do Site no seu blog (Indice de Conteúdo)

Uma dica super útil para facilitar o encontro de todos os seus artigos publicados é criando um Mapa do Site (Sitemaps) no seu blog.
O Sitemaps, ou Mapa do Site, é um índice de conteúdo, que mostra todos os artigos publicados de forma ordenada e que se atualiza automaticamente a cada nova postagem.
Você pode criar uma página estática com um "mapa do site", colocando uma lista de arquivos separados por data de publicação ou se preferir, separados por categorias (marcadores) em uma postagem, facilitando assim a busca de seus artigos pelos leitores.

Vou disponibilizar aqui as duas formas para criar um Mapa do Site, assim você escolhe se quer apresentar um Indice separado por data de publicação ou por categorias.

Para o funcionamento deste script é necessário que seu blog tenha o Feed ativado.

1. Indice por Arquivo




Aqui você vai ver como colocar um Indice separado por Artigos apresentados em ordem descendente por data( Mês e dia da publicação).
Você deverá criar uma nova postagem, ou uma página estática e inserir nela o javascript.
Na edição HTML da postagem, coloque o código a seguir:

<script style="" src="http://dl.dropbox.com/u/3173073/GothicDarkness/indice-arquivo.js"></script>
<script src="LINK-DO-SEU-BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


Não esqueça de colocar o nome do seu blog no local indicado no código, mas retire a barra do final --> "/"

Veja demo AQUI

2. Indice por Categoria


Aqui você vai ver como colocar um Indice separado por Categorias (Marcadores).
Este Script foi criado pelo Abu-farhan.
O script original é em inglês, eu traduzi a versão original para o português.
A diferença deste script para o outro onde o Indice é apresentado por Arquivo, é que neste, a cada post recente publicado, aparece a palavra "Novo!" ao lado de cada nova publicação.



Para incluir este Indice , você deverá seguir o mesmo procedimento explicado acima: criar uma nova página estática, e inserir nela o javascript.
Na edição HTML da postagem, coloque o código a seguir:

<script style="text/javascript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/Indice-categoria.js"></script>
<script src="LINK-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script><span style="font-size: 70%">Custom <a target="_blank" href="http://www.mundoblogger.com.br/2009/11/criar-um-mapa-do-site-no-seu-blog.html">Mundo Blogger</a> |Widget by <a target="_blank" href="http://www.abu-farhan.com/">Abu Farhan</a></span>

Não esqueça de colocar o nome do seu blog no local indicado no código, mas retire a barra do final.

Veja demo AQUI

Se quiser aprender a aplicar estilos para personalizar os títulos das categorias deste índice, confira o artigo:
Personalizar Índice de Conteúdo por Categoria

83 comentários:

  1. Anita:
    Eu que agredeço a sua presença!
    Volte sempre aqui...

    ResponderExcluir
  2. Adorei esse mapa, Clau!
    Já coloquei no meu Mundo de Magia, ficou
    ótimo!
    Mandei no Twitter todas as suas últimas
    postagens, achei todas mto interessantes e
    úteis!
    Lindo domingo pra vc, flor...
    Bjinhossssssss

    ResponderExcluir
  3. Q bom q gostou amiga e obrigada por divulgar!
    Um mapa do site facilita bastante mesmo, eu tb acho muito útil.
    Bom Domingo pra vc tb!
    Bjos...

    ResponderExcluir
  4. aacho que não dou sorte, não funcionou no meu blog ;/

    ResponderExcluir
  5. retira o que eu disse!!

    consegui!!!!

    vaaleu, bjus e abraços!

    ResponderExcluir
  6. Obrigada!
    Era o que estava procurando.
    Funcionou direitinho.
    Abraços!

    ResponderExcluir
  7. Oi Clau !
    Engraçado que por algum motivo que não sei qual é, não aparecem os links na minha postagem no blog...

    Usei o Writter para publicar e nele aparece direitinho todas as postagens (escolhi a por categorias), porém no post do blog não aparece nada...

    Não estou descobrindo o porque... pode ajudar ?

    Abraços

    ResponderExcluir
  8. olá no meu blog aparece apenas as postagens do mês de janeiro e tem desde o meio de 2009 o que eu faço ???

    ResponderExcluir
  9. @ADMHicharles:
    Vc tem que ter ativado no seu blog o gadget de "arquivo", bem como deve ter cadastrado Feed completo pro seu blog, pq esse script busca as suas postagens através das publicações do Feed.

    ResponderExcluir
  10. aaaaaaa intendi agora mais uma pergunta antes da nova pergunta obrigado pela resposta em entendi mas eu percebi que no meu feed só aparace desse mês tb como eu coloco ele por completo ?

    ResponderExcluir
  11. @Ajasta Gayatri:
    Esse código funciona normalmente tanto aqui no Gothic Darkness,como em varios outros blogs que já vi, pode ser o writter que esteja dando erro, como eu não uso ele (uso o próprio painel do blogger para publicar e editar artigos), eu não sei te dizer o q pode está acontecendo no seu template, até pq para cada caso é um caso e eu não sei como te ajudar. O que posso aconselhar é tentar publicar a postagem pelo blogger mesmo e não usar o writter, quem sabe não resolva.

    .::Clau::.

    ResponderExcluir
  12. @ADMHicharles:
    Dá uma olhada neste post sobre Feed, lá está explicando como cadastrar e configurar os feeds do seu blog,quem sabe não te ajuda.

    ResponderExcluir
  13. vlw eu li e entendi mais cometi o maior erro da minha vida :(
    cai na burrada de excluir o feed e criar outro excluir certinho mais na hora de criar simplismente nao cria aqui esta um print
    http://img191.imageshack.us/img191/8233/132qv.jpg

    por favor me ajude agora estou é com 2 problemas sem feed e sem mapa do site.

    ResponderExcluir
  14. @ADMHicharles:
    Vc excluiu o Feed?O.o
    Pq vc não editou ao invés de excluir?
    Tenta editá-lo: Clica em "Editar detalhes do feed…" logo abaixo do nome do seu feed. Lá você poderá mudar o nome do seu feed, a URL dele e a fonte/raiz do feed.
    Tenta ver se dá certo. Eu não sei como te ajudar nisso.

    ResponderExcluir
  15. Boa noite,

    cara o mapa funcionou, mas me diz uma coisa: ele tem um limite de postagens exibidas?

    Pois no meu blog o mapa mostra um numero bem limitado dos posts ao invés de mostrar todos os post, dê uma olhada: http://espaonet.blogspot.com/2009/03/mapa-do-site_807.html

    Se tiver uma solução por favor me ajude...

    Obrigado

    Billy

    ResponderExcluir
  16. @Billy:
    No código do Indice por categoria, onde está marcado: max-results=500, substitua por:
    max-results=9999
    Ou se quiser basta copiar o código no post novamente e usá-lo, eu editei o código aumentando a numeração de 500 para 9999.

    ResponderExcluir
  17. Olá,

    Substitui a numeração no códico de 500 para 9999 mas o resultado foi o mesmo, será que tem algo de errado quando insiro o código?

    Abraço,

    Billy

    ResponderExcluir
  18. @Billy:
    Deve ter sim, e pode ser excesso de scripts ou algum problema relacionado ao seu Feed. Dê uma lida nos comentários acima. Não sei como te ajudar.

    ResponderExcluir
  19. Oi Clau,
    Voltei aqui para dar um retorno do meu caso ;)
    Tive a idéia de hospedar o script no meu site de hospedagem (dropbox) e agora funcionou direito !
    Ao que parece o meu problema era com isso, não sei o porque também o meu blog não reconhecia o script e por isso não funcionava.
    Um abraço !
    Parabéns pelo seu blog mais uma vez !

    ResponderExcluir
  20. @Ajasta Gayatri:
    Eu já entendi o que aconteceu no seu caso: eu vi que seu blog possui domínio próprio, e não sei o pq, mas scripts hospedados no Google Site, NÃO FUNCIONAM em blogs com dominio próprio. Eu hospedo no Dropbox todos os meus scripts utilizados aqui no meu blog, mas alguns dos scripts que disponibilizei nos tutoriais estão hospedados no Google Site, por isso q eu sempre recomendo que hospedem os scripts em algum site de sua preferência. Vc fez certinho!
    Fico feliz q tenha dado tudo certo!
    Obrigada por retornar e volte sempre viu?

    ResponderExcluir
  21. Oiie, nossa, quanto tempo que não falo mais com você :/
    Estou muto sem tempo, mas prometo manter contato.
    beeeeijos :D

    ResponderExcluir
  22. Obrigada , funcionou direito.

    ResponderExcluir
  23. Olá,

    Muito obrigado pela dica. Extremamente útil mesmo.
    Você saberia dizer se é possível fazer um índice com todas as postagens sem divisão por categorias (labels)? Como?

    Desde já agradeço.

    Murilo - editor do blog

    ResponderExcluir
  24. @Palavras de Osho:
    Tem uma outra alternativa: Indice por arquivo igual este aqui.
    Este tb está disponibilizado no tutorial na postagem acima. Dá uma conferida.
    Seria este que vc se refere?

    ResponderExcluir
  25. Não tem como fazer com que os posts de cada seção fiquem compactados em link, tipo um botão expandir não? Assim a página não fica muito grande... Seria ótimo.

    ResponderExcluir
  26. @Leandro Lima:
    Eu desconheço esse recurso, mas se souber de algo por ai eu publico.

    ResponderExcluir
  27. ola eu postei este código no meu blog e confesso que não sei se era per metido ou não mas confesso que foi fácil e muito útil agradeço mas tem um problema o outro coqueiro diz novo também postei mas é o seguinte ele repete duas vezes as frases mas aparece novo em vermelho amei mas sendo assim só poço usar um? não posso usar os dois juntos? beijos

    ResponderExcluir
  28. Muito show mesmo, mas acho que vc deveria facilitar o Mapa do seu site aqui Clau... sou muito seu fan, qualquer coisa que tenho dúvida, pesquiso primeiro aqui...

    Mas toda vez tenho que entrar nessa postagem pra clicar no seu mapa site.....

    Seria melhor vc colocar nem que for pequeno, mas um link na pagina inicial ali na sidebar ou sei lá...

    Caso ja esteja por ali, me perdoe e me dia aonde esta :)

    Bjão parabens pelo seu site mais uma vez

    ResponderExcluir
  29. Nossa Claú, desconsidere meu ultimo comentario, por favor, recuse ele...

    Cabei de achar o que eu estava procurando...

    Desculpa mesmo, é que to muito doente, e não to enchergando nada hj... Mas mesmo doente não consigo ficar longe da net sahushaushaushua

    Bjão!

    ResponderExcluir
  30. Aleluia estava doido atrás de um código de índice por categoria decente. Parabéns. Obriagdo pela grande ajuda!!!

    ResponderExcluir
  31. clau,não consigo,eu jà criei o tal de feedburner e o ìndice jà tem mais de 3 dias e nada aparece :(

    ResponderExcluir
  32. Lucas:
    Ou vc deve ter feito alguma coisa errada na hora que cadastrou seu feed no feedburner, ou, se ele é novo, o google pode estar indexando seu conteúdo no feed.
    Dá uma lida no tutorial:
    Feed - via Feedburner e confere se vc seguiu os passos que estão lá corretamente.

    ResponderExcluir
  33. demora quanto tempo +/-?

    ResponderExcluir
  34. Legal! Agora tenho um sitemap no meu site!
    Valeu a dica!

    Abraços!

    ResponderExcluir
  35. Clau,não existe nenhum tipo de ìndice que represente todos os artigos que não tenha esse maldito feed? =/

    ResponderExcluir
  36. Olá
    Tudo Bom.
    Fiz tudo direito e nao consegui.
    tem ki fazer o tau do Feed Burn pra esse codigo funciona
    eu fiz e nao funciono.nao sei pq pf me ajuda ae
    xau.
    fui

    ResponderExcluir
  37. Lukas
    Não! Tem q ter feed no blog pra funcionar.

    administrador
    O feedburner é opcional, porém, qdo se cria um blog no blogger, por padrão o blogger já fornece um feed para o blog e vc pode usar ele mesmo.

    ResponderExcluir
  38. Excelente Post! Estava pensando em criar um Índice e ia colocar link por link! E agora coloquei tudo de uma vez rapidamente!

    ResponderExcluir
  39. Quanto tempo o seu ìndice levou para aparecer Clau? o meu não aparece! fiz tudo certo. =/

    ResponderExcluir
  40. Lucas
    Eu não tenho como saber qual o problema q tá ocorrendo com seu blog, pq o mapa aparece na hora q instala o código na página, é automático...

    ResponderExcluir
  41. Este comentário foi removido pelo autor.

    ResponderExcluir
  42. Este comentário foi removido pelo autor.

    ResponderExcluir
  43. Clau! Obrigado por tudo,pelas suas respostas,e desculpe-me essas amolanças minhas,por favor rejeita meus outros comentàrios,depois de um tempo o indice apareceu.
    Obrigado mesmo! :)

    ResponderExcluir
  44. Lucas
    Que bom q finalmente deu certo!Fiquei feliz agora.
    Ah e não se preocupe, vc não amola não..qdo precisar, pode deixar comentário sim, eu ajudo no q posso..tem coisas q não dá pra ajudar, mas qdo estão ao meu alcance eu ajudo na boa...relaxa ;)

    ResponderExcluir
  45. Por favor me ajude eu fiz o feed via feedburn la mais ainda nao apareceu nada no Mapa do site pf me ajuda
    quero muito esse mapa, meu site www.linkevolution.net
    t+
    fui

    ResponderExcluir
  46. RadcaLe_
    Não há como eu saber o q aconteceu no seu blog.
    Mas saiba que o cadastro no feedburner é opcional.
    Qdo se cria um blog no blogger, por padrão o blogger já fornece um feed para o blog e vc pode usar ele se quiser.

    ResponderExcluir
  47. Nossa!
    Eu já utilizava o índice por postagens.
    Aí você apresentou esse de categorias.
    Aí eu combinei com o seu esquema de postagem em duas colunas e voi là!

    Agora eu tenho uma página de arquivo que apresenta o índice de postagem e o índice de categorias, lado a lado!
    \o/

    Muitíssimo obrigado!!!!

    ResponderExcluir
  48. Clau,

    parabéns por mais essa dica...

    agora fiquei com uma pulga atrás a orelha:
    como aplicar estilo nesse índice, como você aplicou nos títulos das categorias, por exemplo do índice do mundo blogger? é preciso inseri-lo no arquivo .js? ou uma chamada para a css resolve?

    obrigado.

    ResponderExcluir
  49. Olá CLau!
    Muito obrigado por todas as dicas e códigos!
    Eu tenho uma dúvida aqui.

    Tenho um conhecimento básico em html e css, e com os códigos que eu encontro pela internet, inclusive os teus, eu consigo me virar, adaptar às minhas necessidades e tal.
    Mas não sei nada de Java.

    O que eu quero é editar o primeiro código ali, o de Índice de arquivo.
    Não me agrada aquele númedo que indica o dia dentro do colchete, tipo "[15]".

    Eu queri mudar isso, tirar esse colchete, mas não sei como.

    E agora?!
    o_O

    ResponderExcluir
  50. oantromusical
    Pra vc mexer nessa parte tem q ter um alto conhecimento em javascript. Eu não tenho como te ajudar. Vc vai ter q tentar e testar ai.

    ResponderExcluir
  51. Marlon Weasdor
    Tá vendo só? é tudo questão de tentar e testar. Parabéns por ter conseguido!

    Gilberto Araujo
    Somente uma chamada CSS resolve.

    ResponderExcluir
  52. Clau,como você personalizou o ìndice tutoriais para blogger? jà fiz de tudo por aqui mas não consigo!
    Hà,as suas modificações no Mundo Blogger,ficaram Òtimas!

    ResponderExcluir
  53. Porque que tem vezes que ele não aparece?

    ResponderExcluir
  54. Esses índices não funcionam pra muitos posts...

    ResponderExcluir
  55. Muito Show seu blog ... coloquei o indice no meu site graças a vcs ,,, só uma dúvida ,,, que no exemplo que vc deu do segundo indice aparece tipo uma barra no nome de cada tag ,,, isso ficou muito maneiro ,,, será que poderia me passar esse código ,,, denovo digo que vcs são show ,,, virei fã

    ResponderExcluir
  56. Muito bom bem legal só tem um porem ele demora muito pra carregar

    ResponderExcluir
  57. Nossa muito bom, muito obrigado, ja comecei a usar esse sistema.
    Mais so uma perguntinha kk
    será que tem como escolher a categoria que ira aparecer no mapa do site?

    desde ja agradeço e muito obrigado, muito bom o site =)

    ResponderExcluir
  58. ™L σ я d Pj ™
    Que eu saiba não tem não.

    ResponderExcluir
  59. Oi clau ... Teria como vc ensinar como personalizar as categorias igual vc personalizou o seu. valeu !!

    ResponderExcluir
  60. Sinceramente à pessoas que passam e nada fazem e outras que são imprescindíveis na sua área. Parabéns. Para mim vc esta entre os importantes e necessários.Este script para criação de Índices foi de uma força extrema. Apesar de ser de outro a criação, vc traduziu e nos apresentou. Valeu.

    ResponderExcluir
  61. Naruto
    Já publiquei um post ensinando, dá uma procurada no menu.

    Alexandre Mendes da Silva
    Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!

    ResponderExcluir
  62. este site tem facilitado minha vida
    obrigado
    prabens! pelo site otimo

    ResponderExcluir
  63. Olá Clau, gostei da postagem, muito boa. Mas, gostaria de saber se tem como criar um mapa/índice para um só marcador? é que eu tenho um blog otaku, eu posto várias coisas, e gostaria de criar um mapa só com os animes (marcador- animes), se você souber ou se dar realmente para fazer isso, ficaria agradecida ^-^. Tenha um bom dia!!

    ResponderExcluir
  64. Olá Clau!
    Adorei seu blog, me ajudou muito.

    Não entendi porque a minha lista ficou em algumas partes somente o dia postagem, para você entender melhor segue o link: http://coisaslegaisdalu.blogspot.com/p/lista-de-postagens.html

    Será que tem como você me ajudar?
    Desde já agradeço!!!
    Beijinhos!

    ResponderExcluir
  65. Andrea Winchester
    Melhor vc criar uma página e criar um indice manualmente, é apenas uma sugestão, pois que eu saiba, o script carrega todos os marcadores.

    Luciene
    Tais recursos podem variar de template para template, lamento, mas não tenho como te ajudar.

    ResponderExcluir
  66. Obrigada por responder e pela sugestão, Clau.

    ResponderExcluir
  67. Ola Clau, preciso de sua ajuda, eu gostaria de colocar no meu blog especificamente nas fic aquele aviso para menores de idade vc sabe aonde posso obter esse codigo.
    obrigada e eu estou amando o seu tamplete que uso mo meu blog.
    http://twiligthasagacontinua.blogspot.com/

    ResponderExcluir
  68. Olá!
    primeiramente venho aqui dizer que esse código eu ví ele em outros sites e nenhum tinha os seus créditos ¬¬'.dai como já sigo o blog Gothicdarkness, acabei chegando aqui e vendo o tópico Original(traduzido) desse maravilhoso Script :D saiba que em outros lugares o código é apresentado sem nenhum crédito ¬¬' ah! enfim... mudando de assunto, como já tinha o código =/ somente adicionei no mesmo os devidos créditos ao Mundo Blogger ;D, aqui funcionou legal, sem nenhum erro, ah! e outra, acabei usando esse mesmo código para uma categoria só ^^" criei um só para notícias xD se é permitido quero deixar aqui como eu fiz:

    1. seguindo esse Tutorial de "Criar um Mapa do Site no seu Blog" que é a mostra de todas as categorias de seu blog e o "Personalizar índice de conteúdo por Categoria" eu fiz o seguinte:
    nessa parte do código
    *** script src="LINK-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">/script ****

    eu acrescento logo depois do default o /-/Notícias?
    ao final ficando assim:

    *** script src="LINK-DO-SEU-BLOG/feeds/posts/default/-/Notícias?max-results=9999&alt=json-in-script&callback=loadtoc">/script ****

    E pronto só é exibido aquela certa categoria xD
    no meu caso Notícias, podem ver aqui (se for permitido)
    http://wmaster112.blogspot.com/p/noticias_27.html

    Uma dica é que, se você criou a categoria com letra Maiúsculas, você deverar colocar o nome da categoria do mesmo jeitinho,se mudar uma letra para minúscula o código não vai funcionar =/
    Ex: nome da minha categoria " Notícias " como devo colocar na linha do código: Notícias <<< viu do mesmo jeitinho xD ficando assim:
    *** script src="LINK-DO-SEU-BLOG/feeds/posts/default/-/Notícias?max-results=9999&alt=json-in-script&callback=loadtoc">/script ***

    Ah! e não se esqueça de colocar o /-/ logo depois do default, se não o código também não irá funcionar ^^'

    bem, é isso para finalizar... só tenho a dizer a você Autora "Muito Obrigado!!!" aaahhh! sempre gosto de todas as suas dicas,seu espírito de compartilhamento é muito gratificante e outra sempre vejo você como uma pessoa bastante Humilde, novamente um Muito Obrigado, até logo + em um próximo e longo comentário hahaha! :D
    xauu fica com Deus o/

    Ps: só não coloquei tudo certinho por quê a tag: "script" não é permitida no comentário =/ Sorry, mas é só colocar o < > :D aah! parei já vou indo o/

    ResponderExcluir
  69. Olá Clau, tudo bem. Comecei a blogar e me apaixonei por esse trem. Gostei muito deste tutorial, mas quero saber se não tem como fazer os links se abrirem em outra página quando clicado. Acho que o script deve ser modificado. Se tem outra maneira, informa ai pra galera. Fico grato por sua compreensão. Coitadinho do meu blog se não fosse você.

    ResponderExcluir
  70. nota 10. no meu blog estava dando errado porque no final do enderaça eu colocava duas //

    ResponderExcluir
  71. Esse Índice esta com problemas Clau, notei quando recebi reclamações no meu Blog, achei que fosse problema no meu Feed, mas notei que foram nos meus 2 blogs, então vim aqui te "visitar" e notei que o seu tambem esta com problema, deve ser na hospedagem ou sei lá, só estou informando ok? pode ser que volte ao normal depois.

    Sei que você estava doente e que está sendo mais rigida nos comentarios, mas estou te avisando pra vc tentar arrumar ao seu proprio Blog.

    Abraços

    ResponderExcluir
  72. Oi #Alemão, eu acabei de olhar no meu indice aqui no MB, e ele está funcionando normal...olhei tb o arquivo, para ver se era algum problema no site que eu o hospedei (dropbox) e o arquivo está no ar normalmente. Eu não sei te informar o que possa ter ocorrido. Mas de qualquer forma, muito obrigada pelo aviso.

    ResponderExcluir
  73. Olá, Clau. Vim aqui pra dizer que eu descobrir como carregar um só marcador ao invés de todos os marcadores.

    Basta colocar o nome do marcador neste trecho:
    LINK-DO-SEU-BLOG/feeds/posts/default?max-results=9999

    Deverá ficar assim:

    LINK-DO-SEU-BLOG/feeds/posts/default/-/NOME-DO-MARCADOR?max-results=9999

    Fazendo isso, o script irá mostrar somente as postagens daquele marcador.

    Para descobrir isso, eu juntei esta postagem com essa aqui: widget: exibir postagens recentes por marcador

    ResponderExcluir
  74. WMaster,
    Andrea Winchester

    Opa, valeu pela dica. Excelente ;)

    ResponderExcluir
  75. Clau, coloquei em todos os meus blogs as duas opções que você dá neste post. Com isso, economizei um espaço enorme na sidebar. Estão ficando bem legais os blogs por causa disso. Valeu.

    ResponderExcluir
  76. Ótima postagem Clau, parabéns obrigado!

    http://www.yesachei.net/

    ResponderExcluir

- ANTES DE DEIXAR SEU COMENTÁRIO, por favor LEIA nossa Politica de Comentários.
- Só serão publicados os comentários que estiverem de acordo com nossos Termos de Uso.

Seu comentário não foi publicado? Procure AQUI o motivo.

Se quiser deixar sua URL, comente usando a opção OpenID;

Muito obrigada e volte sempre!