Menu com Índice de Todas as Postagens

Menu com Índice de Todas as Postagens

Encontrei uma superdica que eu estava procurando no Templates e Acessórios. É um tutorial sobre como colocar uma tabela expandivel com todas as postagens do blog. Veja o exemplo:

Para coloca-la em seu blog não é muito difícil. Vejamos:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

• Vá até o HTML de seu blog e clique em "Expandir Modelos de widget"
  
  

Agora procure pelo trecho:

<b:section class='main' id='main' showaddelement='no'>

E substitua pelo código abaixo salvando depois.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

ATENÇÃO: No meu blog, mesmo com o código anterior era possível colocar gadgets acima do post. Quanto fiz essa alteração, não pudia mais. Então, se no seu blog é possível adicionar gadgets acima da coluna das postagens (masmo que seja arrastando o gadget para lá), não precisa fazer essa alteração. Passa para o passo seguinte.

• Agora procure pelo código:
  ]]></b:skin>
  E cole o código seguinte logo acima dele.

<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: #cccccc;
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:100%;
}
</style>

Salve as alterações.

• Vá até "Elementos de página". Note que agora há a opção de colocar Gadgets acima das postagens do blog.  (Talvez não haja; é só arrastar uma gadget de outra coluna para logo acima da coluna post, como no meu caso)

*Aqui (acima do post) é onde aparecerá a tabela quando for clicado em "Conteúdo do Blog".

Clique então e adicione um HTML/Javascript e cole o próximo código dentro dele. Salve !

<div id="toc"> </div>

• Agora, dentro de outro HTML/Javascript (onde ficará o link "Conteúdo do Blog" para a tabela de índice), cole o código abaixo.
  *Não se esqueça de colocar o nome de seu blog no local em vermelho.

<div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div>
<script style="text/javascript" src="http://templateseacessorios5.googlepages.com/tocdoblogparaleitores.JS">
</script>
<script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Pronto! Você acora tem um exelente recurso como índece com todas as postagens para o seu blog.