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 a velocidade 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.