Índice dos Posts

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

Há alguns dias publiquei aqui um post com o ÍNDICE de TODOS os POSTS já publicados aqui no TPV.

Consegui fazer isso graças ao recurso BlogToc que conheci visitando o Blogger'SPhera.
Este recurso foi originalmente publicado pelo blog Beautiful Beta.

E vou ensiná-lo (traduzí-lo) aqui para que você possa ter um ÍNDICE DOS SEUS POSTS facilitando a navegação dos visitantes em seu blog.

Vou ensinar da forma como apliquei aqui no TPV e que tem algumas diferenças do post original.

Esta foi a forma mais fácil que encontrei de aplicá-lo.

OBS: - O índice dos posts ficará em um post criado por você com a data anterior aos posts atuais ou da forma que preferir;
- Você poderá colocar o link do post na sua sidebar ou na sua barra de navegação;

Vamos lá:

1º Passo

Coloque o código CSS acima da linha ]]></b:skin>
→Este código definirá a forma da tabela com todos os posts.

/*----- Blog Toc ----*/
#toc {
 border: 0px solid #000000;
 background: #ffffff;
 padding: 5px;
 width:100%;
 margin-top:10px;}
.toc-header-col1 {
 background: #FFE1E1;
 color: #000000;
 padding:5px; margin-right:5px;
 width:59%;}
.toc-header-col2, .toc-header-col3 {
 background: #FFE1E1;
 color: #000000;
 padding:5px; margin-right:5px;
 width:20%;
.toc-header-col3 {
 background: #FFE1E1;
 color: #000000;
 padding:5px;
 width:19%;}
.toc-header-col1 a:link, .toc-header-col2 a:link, .toc-header-col3 a:link {
 font-size:100%;  border-bottom: 1px dotted $bordercolor;
 text-decoration:none;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
 font-size:100%;
 text-decoration:underline;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
 padding-left: 5px;   border-bottom: 1px dotted $bordercolor;
 font-size:95%;}

2º Passo

Baixe e salve o arquivo Javascript BLOGTOC em seu computador e hospede-o em um SITE de sua preferência.

3º Passo

Crie um post com uma data antiga ou atual. Como quiser.
No post coloque os códigos:

<div id="toc"><div id="toclink" style="border: 1px ridge #000; background: #F2F2F2; font-style: normal; font-weight: bold; text-align: center; font-variant: small-caps; font-family: Lucida Console,Sans-Serif; font-size: 24px;"><a href="javascript:showToc();">Todos os Artigos » Clique Aqui</a>
</div>
<script style="" src="Endereço do Arquivo Javascript"></script>
<script src="http://NOME DO SEU BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=999&amp;callback=loadtoc"></script>
</div>

Obs: Se você usa o recurso Leia Mais pode fazer uma introdução e colocar este código para expandir.

Simples né!
Espero que este recurso ajude vocês.