Criar Página com Arquivos do Blogger - Índice do Site

Já fizemos diversas publicações sobre como classificar ou separar as postagens do seu blogspot:

Postagens mais comentadas
Mostrar Postagens mais Comentadas de Cada Marcador do Blog
Criar um Índice do blog - Mostrar links de todos os posts (mostra todos os links em ordem de postagens mas sem as datas de publicação)

Mas uma delas que ainda não falamos é como criar uma pagina com os arquivos do seu blog, uma espécie de índice do blog com as datas, títulos e links de todas suas postagens. Essa pode ser uma maneira interessante de fazer seus visitantes conhecerem a história do seu blog, vendo todas as postagens publicadas.


Esse é um código muito simples de usar e pode ser colocado em uma das paginas extras (fizemos alguns testes e só funcionou com as paginas extras e não numa postagem comum), ele funciona também como um gadget, mas não recomendamos fazer isso pois deixará seu blog mais demorado para carregar (teste aqui avelocidade do seu blog), agora veja o código:

<style type="text/css">
.arquivos ul {
margin:0;list-style-type:none;
text-decoration:none;
list-style-position: inside;
list-style-image: none;
padding: 0px;
text-align: left;}
.arquivos li {list-style-type:none;margin:0;width:100%;text-decoration:none;list-style-position: inside;}
.arquivos p{
font-size: 140%;
background-color: #FF6;
border: 1px solid #000;
margin-top: 50px;
margin-bottom: 0px;
font-family: "Comic Sans MS", cursive;
padding: 2px;}
.arquivos a{
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
padding: 2px;}
.arquivos a:hover{font-style: italic;color: #00F;}
</style>
<div class="arquivos">
<script>
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postYear=new Array();var postMonth=new Array();var postYearMonth=new Array();var postYearMonth2=new Array();var postTanggal=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;var month2=["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var m=a.feed.entry[h];var e=m.title.$t;var l=m.published.$t.substring(0,10);var p=m.published.$t.substring(5,7);var g=m.published.$t.substring(8,10);var n=month2[parseInt(p,10)-1]+" "+m.published.$t.substring(0,4);var c="/"+m.published.$t.substring(0,4)+"_"+p+"_01_archive.html";var j;for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="alternate"){j=m.link[f].href;break}}var o="";for(var f=0;f<m.link.length;f++){if(m.link[f].rel=="enclosure"){o=m.link[f].href;break}}postTitle.push(e);postDate.push(l);postUrl.push(j);postYearMonth.push(n);postYearMonth2.push(c);postTanggal.push(g)}}}b();displayToc2();document.write('<br/><a href="http://www.mundoblogger.com.br/2009/11/criar-um-mapa-do-site-no-seu-blog.html" style="font-size: 9px; text-decoration:none; color: #616469;">Widget by Mundo Blogger</a></br/>')}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postYearMonth[b];document.write("<p/>");document.write('<a href="http://www.dicasparablogs.com.br'+postYearMonth2[b]+'">'+temp1+"</a><ul>");firsti=a;do{document.write("<li>");document.write("["+postTanggal[a]+'] <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");document.write("</li>");a=a+1}while(postYearMonth[a]==temp1);b=a;document.write("</ul>");if(b>postTitle.length){break}}};</script>
<script src="http://www.dicasparablogs.com.br/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Apenas altere o endereço do seu blog no local onde está nosso endereço aqui na parte final do código. Veja aqui uma demostração deste código fazendo um mapa do nosso site. Lembre-se usamos o endereço .com.br porque temos dominio proprio, se você não registrou domínio use seu endereço do blogspot.

Se quiser pode alterar a parte inicial do código é a formatação dos links do seu arquivo, então veja aqui como formatar corretamente o texto usando estilos CSS:
.arquivos p – formatação dos meses
.arquivos a – aparência dos links
.arquivos a:hover – aparência dos links quando o mouse está sobre eles.

Veja aqui mais detalhes sobre formatação de textos e links:
Como Formatar o Texto do Blog
Como fazer e colocar botões no blog
Colocar ou alterar as bordas

Esse código foi publicado originalmente pelo mundo blogger, nós apenas incluímos a parte da formatação dos links para mudar o estilo visual desta lista com seus arquivos do blogger, veja aqui uma demonstração deste código com os arquivos dos tutoriais do Dicas para Blogs.