Índice com todas as postagens do blog, separadas por categorias

em 14 de janeiro de 2014

Uma das coisas mais legais em um blog é a organização e a facilidade  que ele oferece ao leitor.
Um blog organizado e que fornece fácil acesso ao seu conteúdo tem mais chances de crescer. Certamente o leitor prefere organização e acessibilidade, não é?

Uma forma bem interessante de organizar suas postagens é criar uma lista com todas elas, separadas por marcadores, tags ou categorias, como você preferir chamar.
Veja um exemplo de como ficará seu Índice de postagens se você seguir o tutorial de hoje:

http://blogdetestesdaelaine.blogspot.com.br/p/postagens.html


Para ter em seu blog é muito simples!
Comece criando uma nova página estática: entre em seu painel, clique na aba Páginas, escolha a opção Página em branco.
Coloque o título que desejar e clique na opção HTML. Essa ação reverterá o editor de texto para o modo HTML.
Cole então este código:


Copiar o código


Com dificuldades para copiar o código? 
Leia:
Como usar os tutoriais deste blog?

Todas as alterações em termos de cor de fundo, cor e tipo de fonte, cor e tipo de borda estão marcados no código.
Altere para combinar com seu blog.
Outra coisa que pode ser alterado é o termo Carregando. Substitua caso deseje.
Essas alterações são opcionais, mas onde você lê ENDEREÇO DE SEU BLOG troque o endereço do meu pelo endereço do seu para que suas postagens sejam exibidas..
Não esqueça!

Dicas extras:
Esse recurso só funcionará se seu blog tiver marcadores inseridos nas postagens e se seu feed estiver ativo.
Não é possível selecionar quais marcadores exibir; o script usa o feed do blog como base e lê todos os marcadores criados.
Caso você instale e não funcione em seu blog pode ser que haja conflito com algum script de seu template.
O script lista os marcadores e as postagens em ordem de relevância, ou seja: os marcadores com mais postagens aparecem antes. E as postagens publicadas mais recentemente também aparecem antes em cada marcador.
Vá mexendo, faça testes, até achar a cor certa de cada item. Deixe bem bonito.

Se fizer me chame pra ver!
E se quiser me ajudar/alegrar/fazer feliz compartilhe ou curta essa postagem!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

37 comentários , comente também!

  1. Parece ser muito interessante mas eu não arrisco mexer porque tenho medo de dar cabo do blogue. A verdade é que nestas coisas eu sou mesmo um calhau com olhos.
    Um abraço

    ResponderExcluir
  2. Elaine adorei a dica e vim para dizer que vi que vc esta participando Resultado do Ranking “Top Blogger da Língua Portuguesa” 2013 parabéns você merece... ajuda muita gente e faz um trabalho maravilhoso...bjs

    ResponderExcluir
  3. Eu fiz, apareceu lá na sidebar ......carregando. Depois sumiu!
    O que estará faltando?
    Beijos.

    ResponderExcluir
    Respostas
    1. Jo, tem que ser em página estática e não na sidebar.
      bjsss

      Excluir
  4. Estava a muito tempo quebrando cabeça para colocar em meu blog, vou tentar e depois volto dizer se funcionou. É muito bom quando outras blogueiras mais experientes postam estas dicas, eu amoo. Obrigadaaa
    Blog Devaneios

    ResponderExcluir
  5. Deu certo :) só não tentei mudar as cores, outro dia vou tentar. Beijos e obrigada

    ResponderExcluir
  6. Ótimo conselho, mais tb eu tenho medo de tentar, nunca se sabe vou fazer un blog de testes.

    http://www.my-urban-life.com/2014/01/portimao.html

    ResponderExcluir
  7. Estou passando para dizer que já coloquei no meu blog!
    Agora só falta acertar os detalhes da escolha das cores!
    Obrigada pela sugestão e parabéns pela classificação no Ranking!

    ResponderExcluir
  8. Oi Elaine,
    Obrigada pela dica sobre Desapego.
    Bjs e um ótimo meio de semana para você.

    GOSTO DISTO!

    ResponderExcluir
  9. Elaine, vc salvou a minha pátria, o meu dia!! Meu índice é movido a feijão, fico colocando os links na mão, um por um, nossa... é medonho kkkk

    Assim que estiver instalado, venho contar procê...

    Tenho um pedido: tem como a gente desabilitar o corretor ortográfico do google? Nem sei se é dele ou do navegador, mas o fato é que ele fica corrigindo aquilo que eu não quero, por exemplo, ali em cima escrevi "procê" e tive que corrigir muitas vezes pois ele muda automaticamente para provê. Tá me dando nos nervos kkkk

    beijão

    ResponderExcluir
  10. Olá Elaine,
    Mais uma vez parabéns pelo trabalho que tem realizado no seu blog e muitíssimo obrigado por partilhar conosco.
    Como já tenho vindo a fazer, utilizei esta dica, no entanto algo correu mal, porque as mensagem só aparecem no final do indice e como eu sou uma inesperiente esta coisas não consigo identificar o erro.
    Se poder dê uma vista de olhos e diga onde errei.
    Aqui fica: http://vidasolelua.blogspot.pt/p/indice.html

    ResponderExcluir
  11. Amei sua dica, obrigada por compartilhar,
    Coloquei no meu ficou show de bola!!!!
    http://www.mariafaceira.blog.br/p/2pxcursorpointertabbed-toc.html

    ResponderExcluir
  12. Elaine, achei muito interessante! Facilita muito nas buscas por produtos. Preciso melhorar muito e quero aprender colocar os menus separado por categorias. Parabéns pelas dicas que vc tem feito. Estou sempre acompanhando ok Agradeço pela ajuda e aceito opiniões, críticas etc como melhorar o blog - www.acesseconcursos.com

    ResponderExcluir
  13. OI Elaine, eu adorei o índice das postagens dos blogs.
    Tô doida pra ter no meu também.
    beijos
    Chris
    http://inventandocomamamae.blogspot.com/

    ResponderExcluir
  14. Coloquei Elaine mas, fica aparecendo Carregando... e não acontece nada, Será que fiz alguma coisa errada?
    Adoro suas dicas, obrigada, Iaia Arteira

    ResponderExcluir
  15. Socorroooooooooooo menina eu preciso combinar com vc para mudar meu blog todo, não tenho marcadores rsrsrsra.
    Beijinhos ...

    ResponderExcluir
  16. Eu conseguir, e ficou legal, mais mexir pouco nas cores. Obrigado Elaine pela dica!

    ResponderExcluir
  17. Muito obrigada Elaine!! Já instalei no meu blog, adaptando as cores e deu tudo certo, ficou muito bom!!
    Valeu mesmo, você é demais !!
    Beijinhos

    ResponderExcluir
  18. Oi Elaine apesar de não ter o costume de comentar eu adoro seu blog e tenho aprendido muito com ele adorei esse indice obrigada por compartilhar seu conhecimento e parabéns pelo blog

    http://www.dicasnoblog.com.br/

    ResponderExcluir
  19. Olá, Utilizei e funcionou :)
    obrigada

    http://cantinhodesouvenirs.blogspot.pt/

    ResponderExcluir
  20. Oi, não estou conseguindo copiar o código. Como faço?

    Obrigada

    ResponderExcluir
  21. Como que Muda o Nome das paginas eu Pq fico com os nomes da sua pagina e seus tutorias la

    ResponderExcluir
  22. Olá, criei um blog a pouco tempo, e adorei as dicas que encontrei aqui! Parabéns e obrigada!

    ResponderExcluir
  23. Adaptei, usei e achei ótimo! Grato.
    http://www.keimelion.com.br/p/indice.html

    ResponderExcluir
  24. muito boas as dicas, queria saber tbm como faço para criar uma página diferente com os posts mais acessados para colocar no meu blog de humor www.giftron.com.br

    ResponderExcluir
  25. Oiii eu gostaria de saber como postar as coisas dentro das paginas dps q eu separei ela

    ResponderExcluir
  26. Olá...
    Fiz a postagem, mas quando verifico, aparece "carregando..." e fica nisso!

    ResponderExcluir
    Respostas
    1. Charles, você colocou o endereço de seu blog no local correto?
      Inseriu o código em uma página estática?
      O resultado é exatamente como na demonstração.
      Se tem certeza de haver seguido os passos certinho não sei o que pode ser...

      Excluir
  27. boa tarde um bom cod, porem esta bloqueado, queria usar em meu blog mas não consigo copiar. agradeceria muito a permissão do uso do mesmo.

    ResponderExcluir
    Respostas
    1. Marcelo, pare o mouse sobre o código e clique no primeiro ícone que surgir à direita no alto da caixa de código.
      Isso abrirá o código livre.

      Excluir
  28. Como é bom aprender com que tem o dom de ensinar!

    Hoje passei por aqui, só pra agradecer! São tantas dicas, que você repassa, que dá prazer de vir até aqui, sabendo que você não é egoísta e repassa o que sabe, de forma tão gentil.

    Parabéns! São pessoas como você, que faz a diferença! Continue com este maravilhoso trabalho.

    Foi por intermédio do seu blog, que consegui muito do que fiz no meu. Ontem encontrei um de seus tutoriais de um menu horizontal que era justamente o que eu estava procurando e já adicionei no meu blog!

    Dê uma olhadinha como ficou. http://www.sodicasquentes.com. Fiz algumas pequenas alterações a meu gosto, mais foi graças a você ;)

    Sucesso!

    ResponderExcluir
  29. Você tem tutorial para índice em ordem alfabética?

    ResponderExcluir
    Respostas
    1. só precisa mudar sortAlphabetically: false, para sortAlphabetically: true,

      Excluir
  30. Olá não consegui copiar você poderia dar uma olhadinha obrigada e sucesso...

    http://etudovaidadeh.blogspot.com.br/

    ResponderExcluir
  31. Eu tava procurando por um tutorial assim! Achei bem legal!
    Aqui o meu: http://www.prettythings.com.br/p/indice.html

    Obrigada ♥

    ResponderExcluir
  32. Queria agradecer pela ideia do índice, que ficou muito legal no meu blog. No entanto, gostaria de saber o que fazer, para que todos os artigos apareçam. Pois, mesmo com todos já devidamente marcados, ficou faltando quase a metade na listagem. Parabéns pelo blog. Aguardo resposta.

    www.obrasileanoticia.com.br

    ResponderExcluir
  33. tentei vários... este nao tinha dado certo até olhar os marcadores, salvar e tentar de novo.
    valeu ;)

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…