Índice de títulos de postagens em ordem alfabética ou cronológica

Olá amigos Mult-focos, neste tutorial vou mostrar como criar um índice de títulos de postagens em ordem alfabética ou cronológica. Uma alternativa ao dispositivo arquivo do Blogger.

Bem se preferir você pode usar o código abaixo para fazer uma página estática e linkar no seu menu ou adicionar como gadget, como vamos mostrar aqui.

Vamos ao Widget em duas etapas.

1-Faça um backup de seu template.

2-Vá ao painel do seu Blogger->Layout->Adicionar um gadget->HTML/javaScrit->Coloque nome no seu gadget->copie o código abaixo e cole em conteúdo(depois de ter alterado a URL  para a do seu blog=) salve.

<!-- Ínicio código índice -->
<a href="http://s1316.photobucket.com/user/Multfocos/media/Iacutendice_zps0ba4c6d9.jpg.html" target="_blank"><img src="http://i1316.photobucket.com/albums/t609/Multfocos/Iacutendice_zps0ba4c6d9.jpg" border="0" alt=" photo Iacutendice_zps0ba4c6d9.jpg"/></a>
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<ul style="font-weight:bold">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
document.write(pComment); //Para remover contagem comentário apagar esta linha 
var pComment = " (" + feed.value.items[i].commentcount + " comments)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://mult-focos.blogspot.com.br/
&Order=chrono
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json" 
type="text/javascript"></script>
<span style="font-size: 80%; float:right;">Obter este <a href="http://mult-focos.blogspot.com/2014/05/indice-de-post-em-ordem-alfabetica-ou.html" target="_blank">widget</a></span>
<!-- Fim código índice -->

Agora vamos para a segunda etapa.

1-Vá à modelo->editar HTML->use Ctrl+F e procure pelo nome que você deu ao seu gadget->copie o ID do gadget (não sabe achar o ID de um gadget aprenda AQUI)

2-Achou o ID coloque no código abaixo.

#ID DO WIDGET .widget-content {
height: 200px;
overflow: auto;
}

3-Agora procure por ]]></b:skin>

e acima dele copie e cole o código que você colocou o ID do gadget, visualise se tudo estiver ok, salve, seu widget estará funcionado.

Modificações opcionais. 

A-Para remover a contagem de comentários apague a linha 11

B-O widget vai como padrão em ordem cronológica, se quiser mudar para ordem alfabética é só substituir na linha 22 a palavra chrono por alphabet.

C-Se preferir enumerar a lista de títulos é só mudar(ul por ol)preste atenção pois ele aparece na linha 05 e linha 17, terá que trocar os dois.
D-Se precisar mude a  altura no segundo código, por padrão esta com 200px.
Prontinho, isto é tudo.