13/09/2010

Criar um Índice do blog - Mostrar links de todos os posts

Veja como fazer um índice no blog com o titulo e o link de todas as postagens, esse código mostrará o links de todos seus posts em ordem de publicação, colocando os mais recentes no final da lista. Se quiser veja aqui como mostrar uma lista em ordem aleatória com os artigos recentes, isso pode ajudar na divulgação do seu blog fazendo seus visitantes olharem mais paginas e assim tem mais chances de gostar e voltar outras vezes no seu blog ou quem sabe até recomendar o blog para outras pessoas e assim atrair mais visitas.

Entre na pagina designer, clique para adicionar um gadget e use a opção html/javascript. Então cole o código abaixo:
<style type="text/css">
.todosposts {
border: 1px solid #000;
height: 250px;
width: 300px;
overflow: auto;
}
.todosposts a{
color: #00C;
text-decoration: none;
}
.todosposts a:hover{
color: #F00;
text-decoration: underline overline;
}
</style>
<div class="todosposts">
<script type="text/javascript">
function showrecentposts(json) {
document.write('');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Baca)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
}
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://dicasparablogs.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script></div>


Sabemos que é um código grande, mas as partes que precisam de alteração são poucas e fáceis de fazer, no inicio do código temos o seguinte trecho:

.todosposts {
border: 1px solid #000;
height: 250px;
width: 300px;
overflow: auto;
}
.todosposts a{
color: #00C;
text-decoration: none;
}
.todosposts a:hover{
color: #F00;
text-decoration: underline overline;
}

Na primeira linha podemos escolher outros tipos de bordas e o tamanho da caixa alterando os valores do estilo todosposts{..., veja as linhas: height: 250px; width: 300px. Se não quiser a caixa, mas mostrar somente a lista completa sem barra de rolagem apague o trecho overflow: auto; e height: 250px.

Depois podemos editar completamente a aparência dos links alterando o estilo .todosposts a e .todosposts a:hover, veja aqui como fazer a formatação de texto dos links.

E na parte final do código temos a linha:

...script src="http://dicasparablogs.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-re....

Aqui você deve colocar o endereço do seu blog e já está tudo pronto. Falamos aqui como fazer isso em um gadget, mas poderia ser muito util também numa pagina extra do blogger, assim você teria um link para mostrar seu indice em vezes que carregar junto com cada pagina visitada.

Também é possivel criar uma lista com os posts de cada um dos marcadores do blog, para fazer isso no trecho onde colocamos o endereço do blog, modifique para ficar assim:

http://www.dicasparablogs.com.br/feeds/posts/default/-/Efeitos?
orderby=published&alt=json-in-script&m......

A palavra Efeitos é o nosso marcador, mas se for utilizar isso precisa escrever o nome do marcador exatamente como está no seu blog, fizemos um teste e usando a palavra efeitos com letra minúscula não funcionou, portanto tem que ser igual está no marcador do blog.
Related Posts with Thumbnails

83 comentários:

  1. Boa noite !
    Obrigada pela dica ! Vivia procurando algo que deixasse bem à mão todas as postagens, pois convenhamos o arquivo padrão do blogger não é lá muito funcional...
    Já segui sua sugestão e apliquei numa página extra !!
    Grande abraço !

    ResponderExcluir
  2. Dica simples que pode ajudar os motores de busca a indexar melhor seu site. Bem simples mesmo, como disse no dihitt, vou já fazer meu mapa do site. Att: Fábio

    ResponderExcluir
  3. Fabiano eu gostaria de saber se tem como colocar isso somente de uma categoria, e se poderia exibir tambem na Home do blog?

    ResponderExcluir
  4. é possivel fazer isso com cada marcador.

    em vez do endereço do blog coloque assim:

    http://www.dicasparablogs.com.br/feeds/posts/default/-/Efeitos?
    orderby=published&alt=json-in-script&m......

    a palavra Efeitos é o marcador do blog, mas note que usamos letra maiuscula na palavra igual está em nosso marcador, fizemos um teste com letra minuscula e não funcionou, ou seja, tem que ser exatamente igual como está no marcador do seu blog

    ResponderExcluir
  5. Coloquei em uma página extra do blog, não funcionou, se vc puder dá uma olhada, só não incorporei ao site, mas criei a pagina e não parece nada, só a borda :((

    ResponderExcluir
  6. Oi Fabiano, tudo bem? Gostaria de saber se há como colocar em um único item do índice dois ou mais posts sobre o mesmo assunto, p.exemplo, se já falei sobre um assunto mais de uma vez, todos os posts ficariam juntos. Já vi isso em outros blogs, tem como fazer por esse código? Desde já obrigada!
    Marina.

    ResponderExcluir
  7. Esmaltes e Ponto
    veja se alterou o código corretamente


    casoriomari&dolfo
    a ordem da lista é a mesma que foram feitas as postagens(mais recente no começo da lista)

    ResponderExcluir
  8. Ufa, até que enfim, consegui, agora tem cpmp cplpcar marcadores nos indices, ou seja ficar cada post assim

    . Haja dinheiro
    . Micoses

    Desde ja agradeço

    Maysa

    ResponderExcluir
  9. Consegui,mas andei observando algo,não é a mesma coisa que arquivo do Bloog?não existe diferença..

    ResponderExcluir
  10. MUITO BOM O POST! ALIÁS MUITO BOM O BLOG! APRENDO AQUI MUITAS COISAS E CONSIGO ENTENDER MUITO COM COM A EXPLICAÇÃO DO ESCRITOR. NA MINHA OPINIÃO É UM DOS MELHORES BLOG DESSE TEMA. CONTINUEM ASSIM.. BRAÇOS...!...

    ResponderExcluir
  11. Esmaltes e Ponto
    veja um comentário que fizemos antes deste, lá mostramos como usar essa lista com os marcadores.

    vamos atualizar a postagem e colocar nela também como usar isso em cada um dos marcadores.

    ResponderExcluir
  12. Olá Fabiano!!!
    Muito boas suas dicas.. ótimo blog.

    Me diz uma coisa, tem como eu colocar esse índice para que ele apareça em ordem alfabética?

    esse foi o melhor que vi até agora, mas queria ordená-los.

    Abraço!!!

    ResponderExcluir
  13. Não quero usar nos marcadores do blog, quero colocar um ponto ou travessão em cada postagem do indice, ficar assim

    - Unhas decoradas
    - Unhas postiças
    ou

    . Leitora da Semana
    . Entrevista

    Colocar marcadores no indice deste jeito que mostrei acima, para ficar na frente de cada titulo de post no indice

    ResponderExcluir
  14. veja o link sobre formatar o texto, poderá colocar até uma imagem antes dos links

    ResponderExcluir
  15. Gostei da sua dica. Já apliquei nos meus blogs! Desta vez tudo saíu bem à primeira :) Obrigada.

    ResponderExcluir
  16. Oi Fabiano,será que existe algum còdigo,que represente todas as postagens publicadas,como se fosse um índice? SEM AQUELE MALDITO FEED?

    ResponderExcluir
  17. Lukas
    acho que o unico jeito é usar o feed

    ResponderExcluir
  18. Fabiano,esse feed maldito não funciona no meu blog,eu faça tudo certo e tà a mais de 5 dias vazio.

    ResponderExcluir
  19. Lukas
    veja as configurações >> sitefeed

    se usar feedburner precisar ver lá também

    ResponderExcluir
  20. poxa, gostaria de saber como retirar a margem. A página do blog fica mt limitada. Bjks

    ResponderExcluir
  21. Oi, deixa eu te falar... como posso inserir no meu blog uma nova fonte q naum eh disponibilizada p o meu blog??? Como saber o código d nova fonte ???
    vlw, bjks

    ResponderExcluir
  22. Oi, sou eu de novo. Estou tentando inserir um video no meu blog, em formato AVI, mas estou tendo dificuldades. Não sei o tipo de arquivo q o blog aceita para essa postagem. Fiz a montagem no movie maker, ficou taum lindu....caso o blogger naum aceite, como faço para converte-lo??? e power point, eh aceito???
    bjks

    ResponderExcluir
  23. Oi fabiano!! tu já me socorreu outras vezes, e deu certinho...
    agora preciso de ajuda para colo car no blog um link na barra lateral, que qdo se clica abra a página da postagem, no caso a postagem antiga do meu blog mesmo...
    deve ser bem fácil, mas a tonta aqui não consegue.
    Se quiser da uma olhada lá ...só aparece os dizeres emesmo assim tem que clicar 3 vezes...
    http://enkantosdalena.blogspot.com
    Obrigada vó Lena!

    ResponderExcluir
  24. lenalima
    veja aqui sobre Links das postagens mais antigas e mais recentes

    mas acho que não tem como colocar isso na sidebar do blog

    ResponderExcluir
  25. PoxaFabiano, postei umas perguntas e vc nem me respondeu... snif...poxa vc responde a td mundo e menos as minhas... desde jah agradeço sua atnção, snif.....
    www.vanenen.blogspot.com

    ResponderExcluir
  26. Vanessa
    na verdade fui pesquisar sobre outras fontes e ia fazer um tutorial sobre o assunto, mas ainda não terminei...

    você pode Como Formatar o Texto do Blog, mas logo vou publicar um tutorial mostrando como usar mais fontes.

    sobre o video acho mais facil postar no youtube e depois colocar no blog

    ResponderExcluir
  27. Vlw, Fabiano... aguardo!!! vc eh show

    ResponderExcluir
  28. Vanessa
    sobre as margens pode diminuir esses valores(15, 20 e 25) na pagina editar html

    .post-outer {
    padding: 15px 20px;
    margin: 0 0 25px;

    ResponderExcluir
  29. Oi Fabiano, acabei de montar um blog,ñ entendo quase nd, como faço p/ aparecer em meu blog, todos os blogs q sigo com a imagem deles, com a última postagem deles?
    Coloquei no meu blog ref. divulgação de postagens, vamos ver se fiz certo...Obrigado.

    ResponderExcluir
  30. fabiano tem como colocar em ordem alfabética?
    Se tiver em q linha devo mudar?

    Parabéns pelo blog ajudou demais até aqui.

    ResponderExcluir
  31. não conheço um código para fazer essa lista em ordem alfabetica

    ResponderExcluir
  32. Ótima dica. Coloquei no meu blog e acho que vai ajudar bastante. Valeu por compartilhar.

    http://www.dddownloadsedicas.blogspot.com/

    ResponderExcluir
  33. E ai galera parabens pelo trabalho bem feito tudo aqui funciona e muito bem por isso recomendo valeu galera do Dicas para Blog !!!

    ResponderExcluir
  34. Olá fabiano...pois é, eu consegui legal, até consegui fazer pagina extra, mas como colocar esse indice numa pagina extra?

    é possivel?

    aguardo respota...

    valeu!

    ResponderExcluir
  35. você tentou postar esse código na pagina extra... deve funcionar, mas use a guia html na pagina de postagem

    ResponderExcluir
  36. Ok fabiano. vou tentar...
    acho que expus minha duvida de forma incompleta, pois gostaria de saber se na pagina extra os posts serão linkados para suas devidas paginas e como fazer isso...

    muito obrigado!

    ResponderExcluir
  37. as paginas extras nao aparecem neste código para fazer o indice

    ResponderExcluir
  38. pronto!

    consegui..é estranho, pq tentei 4 vezes, e nas tentativas 2 e 3 não deu certo..
    mas na 4 deu...vai saber..


    valeu!

    ResponderExcluir
  39. Muito show, consegui mesmo, Obrigado pela dica!

    ResponderExcluir
  40. Obrigado pela dica ajudou bastante sou fã do seu blog!parabens!

    ResponderExcluir
  41. Olá,
    Já tentei várias vezes e não consegui :-(. Aparece apenas um quadrado branco. O meu blog é super novo, mas tem duas postagens, o que já daria para ver num índice. Tem idéia de o que posso tá fazendo de errado?

    ResponderExcluir
  42. aqui tem um código para indice do blog (arquivo)

    http://www.mundoblogger.com.br/2009/11/criar-um-mapa-do-site-no-seu-blog.html

    ResponderExcluir
  43. Oi Fabiano desde já agradeço pelo post me ajudou bastante, gostaria de saber em que linha deste codigo eu posso colocar um titulo do indice, e seu respectivo codigo.

    ResponderExcluir
  44. você pode colocar o titulo entre essas linhas:

    </style>
    titulo aqui
    <div class="todosposts">

    ResponderExcluir
  45. Cara na visualização do post até funciona mas depois de salvo a lista desaparece e só fica o "titulo aqui" OBS: uso o BLOGGER

    ResponderExcluir
  46. você colocou o endereço do seu blog corretamente no código? veja se não apagou nada por engano... qualquer coisa faltando ou sobrando dá erro no código

    ResponderExcluir
  47. Cara descobri o erro, tem que adicionar o texto no código num editor de texto e depois colar no html se mexer no código depois de postado da erro.
    Obrigado pela pronta ajuda
    Abrç!

    ResponderExcluir
  48. Muito bom. Sabe como colocar as primeiras linhas do post abaixo dos títulos?

    ResponderExcluir
  49. Bem a dica é ótima, a muito tempo procura por este recurso, outro parecido é o do próprio blogger, porém o mesmo limita o número de postagens a 10, o que o torna fraco. Muito Obrigado

    ResponderExcluir
  50. Bem, fiquei com uma dúvida; gostaria de saber se é possivel reduzir a quantidade de postagens exibidas, pois meu site é um pouco pesado, e o indice acabou ficando um pouco lento para carregar; o trexo a ser alterado é este: var numposts = 1000;??? ou existe algo mais ??

    ResponderExcluir
  51. Miku
    altere no trecho final

    http://dicasparablogs.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=99&callback=showrecentposts

    veja que está 99 aqui neste comentário e no tutorial 999

    ResponderExcluir
  52. Fabiano Roberto, obrigado, essa dica também deu certo, agora sim esta perfeito!

    ResponderExcluir
  53. Colei o script na minha página e apareceu apenas u, quadro em branco

    ResponderExcluir
  54. veja se não apagou nada por engano na hora de colocar o endereço do seu blog no código

    ResponderExcluir
  55. ola
    gostaria de saber se vc tem algum tutorial de como fazer um indice por letra.
    eu ja vi em varios blogs e nao achei nenhum lugar que ensine

    ResponderExcluir
  56. acho que no blogger não tem indice em ordem alfabetica

    ResponderExcluir
  57. eu fiz mas não apareceu o indice, apenas um quadrado em branco,me ayudem por favor conforme as orientações dadas neste blog

    ResponderExcluir
  58. KANTUTA - LLUVIA DE SABORES Y AROMA DE CAFÉ DE CHARITO


    veja se no trecho final do código colocou o endereço do seu blog certo

    script src="http://charitoperaza.blogspot.com/feeds/posts/default?
    orderby=published&alt=json-in-script&max-results=999

    cuidado para não repetir a barra ou deixa sem ela

    http://charitoperaza.blogspot.com/feeds/posts/default.....

    ResponderExcluir
  59. Ola, eu quero colocar cada postagem em uma pagina diferente, não uma postagem uma em baixo da outra, e sim cada uma em paginas diferentes, eu ainda não consegui fazer isso, por favor me ajudem

    ResponderExcluir
  60. mas se clicar no link da postagem ela aparece numa pagina sozinha.

    só aparecem varias na pagina inicial ou dos marcadores

    ResponderExcluir
  61. o post está fantastico, mas se eu pretender que esta lista fique por ordem alfabética? como devo fazer?

    www.baratta-infantil.blogspot.com

    ResponderExcluir
  62. acho que não tem como fazer a ordem alfabetica

    ResponderExcluir
  63. Cara, ficou muito massa o código! eu fiz um pouco diferente: eu peguei a parte do javascript e lancei num arquivo .JS e salvei no Google sites. Daí, eu usei o SRC="link.js" e o restante do código!

    link
    https://sites.google.com/site/hospedagemmaxters/scripts/itenspostagem.js?

    Ainda por cima, além de pôr esse código na minha página de índice, eu criei um banner rolante com marquee e com função de mudar direção!

    Obrigado, Dicas para Blog!

    ResponderExcluir
  64. Boa noite.
    A dica é muito boa, mas eu coloquei o código e modifiquei apenas a parte do URL, mas a pagina com o índice fica em branco, não entendo o por que?
    Alguém pode me ajudar por favor?

    ResponderExcluir
  65. Boa noite.
    A dica é muito boa, mas eu coloquei o código e modifiquei apenas a parte do URL, mas a pagina com o índice fica em branco, não entendo o por que?
    Alguém pode me ajudar por favor?
    Assinado: Tiágo.

    ResponderExcluir
  66. se trocou o endereço do seu blog corretamente então pode ser alguma falha ou incompatibilidade dos scripts utilizados no código que mostramos

    ResponderExcluir
  67. OLHA EU CONSEGUI,MAS ACONTECE UM PROBLEMA, NO MEU BLOG EXISTE 1137 POSTAGENS E O ÍNDICE SÓ MOSTRA 500, O QUE ESTA ACONTECENDO E COMO POSSO ARRUMAR?

    ResponderExcluir
  68. Valter era para mostra 1000 com esse código, mas são códigos externos criados por pessoas fora do blogger, então as vezes dá algum erro.

    ResponderExcluir
  69. não sei o que acontece, mas quando coloco este código e com o que recomendas, sem mais nem menos ele desaparece.Também quando colo no blog todo o texto fica sublinhado em vermelho.

    ResponderExcluir
  70. se o sublinhado é numa cor diferente do texto é porque na verdade é uma borda.

    procure por border-bottom: 1px solid #f00

    ou algo parecido com isso e apague.

    ResponderExcluir
  71. Eu queria identificar todas as URL.s do meu blog que estão com underline, tem como listar?

    ResponderExcluir
  72. MAURICIO quer deixar todos os links sublinhados? igula está o texto inscrever-se por e-mail abaixo desta caixa de comentários?

    se for essa sua duvida é só entrar na pagina editar html e procurar pelo código:

    a {..... }
    se encontrar dentro das chaves text-decoration:none; troque a palavra none por underline.

    mas se não tiver é só adicionar text-decoration:underline; dentro das chaves

    ResponderExcluir
  73. No meu so funcionou assim que coloquei, depois ele sumiu do nada e nunca mais apareceu, nem colocando de novo. :\

    ResponderExcluir
  74. Aline veja se no seu html tem o código

    a:visited{....}

    isso é uma cor dos links que já foram clicados. Se quiser pode usar uma outra cor neles, ou se preferir que todos os links fiquem da mesma cor apague esse trecho. (eu apaguei em todos meus blogs)

    ResponderExcluir
  75. Muito obrigada pela ajuda!!!
    Tinha tentado de inúmeras formas e só consegui com seu "tutorial"!

    ResponderExcluir
  76. Ola Fabiano. Parabéns pela pagina. E a primeira que encontro onde se aprende realmente como fazer as coisas. Usei o código deste post e já consegui juntar espaços e imagem. Agora ando às voltas para por o índice em ordem alfabética. Não há nenhuma formula para isso? o meu sight é www.anamiuda.com, se for ver na pag Indice geral pode compreender a
    necessidade da ordem alfabética. Obrigada

    ResponderExcluir
  77. Ana
    já vi código para colocar em ordem alfabética mas não tenho esses códigos.

    se encontrar use isso numa pagina extra e não na sidebar do blog porque normalmente esse tipo de código é pesado (faz o blog demorar para carregar)

    ResponderExcluir
  78. Ficou ótimo em meu blog. Obrigado por colaborar; está lá: http://www.keimelion.com.br

    ResponderExcluir
  79. Ficou ótimo cara! eu sofrendo pra caramba pra conseguir achar um bom índice e finalmente encontrei! Muito obrigado! http://reflexhuman.blogspot.com.br/

    ResponderExcluir