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:
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.
A cor que "pickei" (amarelinho torrado), tem o código html F4EA4A, que aparece imediatamente na caixa cá em baixo.
O código que introduzi (A354FC) corresponde à cor que aparece logo como moldura, neste caso o lilás.
