Lista de Artigos / Table of Contents

Mais um utilitário:
Vejam! Logo no início da minha barra lateral, por debaixo do título “Lista de Artigos”, está um link a dizer “Mostrar Lista de Artigos”. Se clicarem nele, ao lado esquerdo, na zona das mensagens, e por cima destas, irá aparecer uma listagem de todos os meus posts, com o seu título, a data de colocação e as respectivas etiquetas.
Experimentem clicar para ver! Quando isso acontecer, as mensagens são puxadas para baixo (da lista que aparece) e o link passará a indicar “Esconder Lista de Mensagens”. Se lhe clicarem, tudo volta ao estado inicial.
Vemos pois que se trata de uma funcionalidade muito prática, permitindo o acesso fácil a todos os posts, sendo que essa lista pode ser ainda ordenada por título, por data e por etiquetas, para facilitar ainda mais a descoberta de todos os posts/artigos/mensagens.
Tudo isto com uma ocupação mínima do espaço do blog, pois quando ele carrega aparece a lista escondida e podemos colapsá-la quando quisermos.
Mãos à obra!
1. Faça o download do seu Template/Modelo. É sempre bom prevenir, pois algo pode correr mal;
2. Adicione um elemento de página (vai ficar por cima das suas “Mensagens de Blogue”)
Para isso:
a) Edite o seu Template/Modelo em html (“Editar HTML”) e procure por:

b) Mude para:

c) Grave o Template/Modelo e vá para “Elementos de Página”
d) Adicione um elemento de página html, que irá ficar por cima do elemento de página principal “Mensagens de Blogue”
e) Deixe o título em branco e como conteúdo ponha:

f) Grave novamente o Template/Modelo
3. Adicionar um Elemento HTML à Barra Lateral
a) Acrescente um elemento de página (em HTML) à sua barra lateral (depois logo o posiciona como quiser)
b) Coloque-lhe o título “Lista de Artigos”, ou outro que pretender
c) No conteúdo ponha:

Mostrar Lista de Artigos

script style="text/javascript" src="http://www.cei-esas.com.pt/Uploads/luisj/TOC.js">

Em que YOURBLOG deve ser substituído pelo endereço do seu blog, naturalmente.
d) Grave!
4. No início do conteúdo do elemento de página que acabou de acrescenta, coloque:

style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
/style>

E é tudo. Caso algo não funcione como o esperado, ou subsista alguma dúvida, não hesite em pedir ajuda.