DICA 20: CRIAR UM ÍNDICE DO BLOG 2 – EM ORDEM ALFABÉTICA OU CRONOLÓGICA

DICA 20: CRIAR UM ÍNDICE DO BLOG 2 – 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.

Código de Exemplo:

<!-- Í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://jj-stuff.blogspot.pt/

&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 (OPCIONAL).

1-Vá à modelo->editar HTML->use Ctrl+F e procure pelo nome que você deu ao seu gadget->copie o ID do gadget

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

<span style="font-family: inherit;" >#ID DO WIDGET .widget-content {

height: 200px;

overflow: auto;

}

</span>

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

E acima dele copie e cole o código que você colocou o ID do gadget, visualize 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.

FONTE: MULT-FOCOS