» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Índice dos Posts

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.
Índice dos Posts Índice dos Posts Reviewed by Áurea on 5/08/2009 Rating: 5

11 comentários:

  1. Adoro seu site!
    As dicas sempre me ajuda a melhorar meu blog!
    Valeu!
    Bjs

    ResponderExcluir
  2. Muito bom poder contar com suas dicas!
    Meu site de poemas fica lindo de se ver!
    Dicas de mestre!
    Abs
    Kryss

    ResponderExcluir
  3. Ola Aurea minha querida. Estou pasando aqui apenas para dar um oi e nada mais.
    Você é muito famosa nos outros blogs sempre vejo seus recados, chegava a ser engraçado. eu entrava em um post e via um recado seu, entrava em outra e..... mas enfim.
    Daew eu pensei com o meu humilde cerebro... “porque não ir ate o blog da Aurea e dar um oizinho a ela?”
    Mas é isso. Espero que tenha gostado do recadinho.
    bjuhs

    ResponderExcluir
  4. Muito boas estas dicas, tenho aprendido muita coisa interessante aqui. Este é simples mas trasnforma completamente o look de um blog

    ResponderExcluir
  5. Não consigo salvar esse arquivo recomendado. Ele está em algum outro site?

    ResponderExcluir
  6. @Breno Lucano Já corrigi o link do arquivo java. Pode baixar agora. Obrigada por avisar.

    ResponderExcluir
  7. Muito bom Aurea! Eu sou meio lesa.. então lá vai a pergunta:
    Você já postou sobre esse menu explandível na área dos comentários? =)
    Beijos da Mama

    ResponderExcluir
  8. Agora ficou bem melhor. Agradeço, Áurea.

    ResponderExcluir
  9. Áurea, agradeço profundamente o trabalho por si realizado. Toda a minha edição do HTML do Portal Veritas foi finalizado graças a seus tutoriais, entre outros. Por isso, agradeci publicamente seu empenho no próprio Portal, através do qual pude aprender muito.


    Cordialmente,

    Breno Bastos
    Gerente do Portal Veritas

    ResponderExcluir
  10. Áurea,

    Para agradecer e dizer que ficou muito bom este tutorial!
    A forma didática que você utiliza simplifica muito mesmo!
    Parabéns!

    ResponderExcluir
  11. Onde eu coloco este código CSS do início, desculpe, não tenho muit conhcimento

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.