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.