terça-feira, 12 de maio de 2009

Como fazer um índice de posts sem scripts

Tanto a quanto a Áurea ensinaram como fazer um índice de posts ou tabela de conteúdos no blog, usando o script Bloctoc, criado pelo Hans, do Beautiful Beta. É lindo e funcional, mas para quem tem muitos posts publicados demora um bocado para carregar. Quem quiser fazer um índice bem mais fácil, sem precisar de scripts, pode aproveitar esta dica que peguei no Blogspottutorial.

Aproveitando a própria lista de posts resultante da procura(search)do Blogger que está no template, basta adicionar algumas condicionais e pronto, temos um índice de posts publicados na qual você pode controlar a quantidade que você quiser por página, e além disso, dá também para fazer um índice com posts por categoria (essa eu descobri sozinho).

1º passo:

1- No Painel de controle de seu blog, vá em Lay-out >> Editar HTML e salve o seu template.
2- Clique em Expandir o modelos de widgets e procure (usando control + F) a seguinte linha de código:
<b:include data='post' name='post'/>
3- Delete o código acima e coloque no lugar esse código:
<b:if cond='data:blog.homepageUrl !=data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;
border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;
color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
4- Salve o template clicando no botão salvar
5- A cor do background e dos links (color) podem ser customizados colocado outras de preferência.

2º passo:

1- Se você quiser colocar o link do índice de posts na sidebar, é só ir em Lay-out >> Elementos de páginas >> Adicionar gadgets >> clique em HTML/Javascript e cole esse código abaixo:
<a href="http://NOME-DE-SEU-BLOG.blogspot.com/search?max-results=200">
Mostrar todos os posts »»</a>
2- Caso você queira colocar como índice ou mapa do site numa barra horizontal como a que tenho acima, é só adicionar o link no código:
<li><a href="http://NOME-DE-SEU-BLOG.blogspot.com/search?max-results=200">
Índice/Tabela de conteúdos
</a></li>
3- Caso queira utilizar um índice para um marcador específico, use o link assim:
<li><a href="http://NOME-DE-SEU-BLOG.blogspot.com/search/label/NOME-DO-MARCADOR?max-results=200">
NOME DO MARCADOR
</a></li>

O segredo? É simples. Ao adicionar no link de procura de posts o termo ?max-results=200, você manda procurar os 200 posts iniciais. Esse número pode ser trocado conforme a sua necessidade. Tudo automático, não precisa esperar o script carregar como nos outros casos.

O resultado vocês podem ver clicando na barra de navegação acima, seja em Poemas, Crônicas, Humor ou Artigos. Os três primeiros mostra uma lista com marcadores específicos e o último, todos os posts.
Coloquei também links com marcadores específicos abaixo na parte magazine do template. Confiram!

24 comentários:

  1. Esse índice é para pessoas que são super mega power organizadas, né? Beijus

    ResponderExcluir
  2. Oi Cidão,

    Que complexidade, ein?
    De qualquer maneira, gato, vim para te dizer que nomeei o teu blog para:

    The Best Foreign Language Blog

    http://bloggerschoiceawards.com/

    Parabéns e beijos!

    ResponderExcluir
  3. Excellent blog, nice post. I love the contents and thoughts. I am so proud to vote for this beautiful blog. I VOTED FOR YOU, I hope many friends like Danaty, Freearticle, Fengshui, chinafan, freearticle will Vote for u. I expect your valuable suggestions about
    my favorite Business Blog. I hope you will grace me with your precious Vote.Just copy this link to your browser
    http://bloggerschoiceawards.com/blogs/show/69551

    ResponderExcluir
  4. Oi Cidão! Obrigada pelas dicas e parabéns pela indicação ao prêmio! *\o/*

    ResponderExcluir
  5. Muito boa a dica, muitos scripts fod* com o carregamento do blog mesmo.


    abs,
    Fabricio

    ResponderExcluir
  6. Luma: Nem tanto!!! Colocar uma lista dos artigos ou um índice é útil para os leitores conhecerem mais o seu blog. :o)

    Max: Não é complexo!!! E obrigado pela nomeação, muito obrigado!!! :o)

    College Girl: I visited your blog and it's very interesting. There're may useful things there!! I've already voted for you!! :o)

    Mamanunes: Obrigado e volte sempre!!!

    Fabrício (brohg): Além disso, o problema dos scripts é também arranjar um lugar confiável para hospedá-los. :o)

    ResponderExcluir
  7. Excelente dica para índice. Fácil, útil e bonito!
    Mas eu queria se este índice poderia mostrar os post em ordem alfabética. Agradeço se me orientar.

    ResponderExcluir
  8. Ana Lucia: Nesse caso não. O jeito é usar o tutorial da Ro ou da Áurea, pois isso só com uso de scripts. :o)
    Obrigado pela visita! Volte sempre!

    ResponderExcluir
  9. legal seu blog hein...usei duas de suas dicas pra encrementar o meu blog...o furmulário antigo pra incentivar mais comentários já que estou meio fraco neste aspecto...e o índice de postagens que ficou exelente ...e eu que achava que ñ daria pra implementar mais nada. vô colocar seu blog imediatamente no meu goggle reader ... e visualizar na super apps Orkut Feed Reader / Google Reader ...valeu bom fim de semana!!!!

    ResponderExcluir
  10. nando for fun: Obrigado pelas palavras, cara. Volte sempre!!! :o)

    ResponderExcluir
  11. olá blz obrigado pela visita vi sua foto la no gadget do blogblogs ,que diga se passagem é uma exelente ferramenta para exibir blogs de outras pessoas e para divugação do nosso própio blog.
    Então como eu tinha usado o Hack da Rô design diferente para cada página do blog ,a sua dica caiu bem como uma luva agora tenho pelo menos 5 paginas diferentes ,arqivo,pesquisa interna e personalizada e home e de indice ...confira ai como ficou o resutado final nando4fun¨¨O¨¨¨¨O¨¨ indice mostrar todos os post
    muito obrigado¨¨O¨¨¨¨O¨¨

    ResponderExcluir
  12. nandoforfun: Ficou legal, cara. E não tem do quê. Saber que minha dica ajudou alguém me deixa muito feliz.
    Parabéns!

    ResponderExcluir
  13. Olá amigo, não sou de comentar mais vc merece :]!

    Obrigado.

    ResponderExcluir
  14. Olá caro Cidão, sou novo assinante dos seus feeds e estou bem animado com o seu conteúdo, tipo de cada a duas postagens, uma me interessa... parabéns e obrigado!
    Sobre este seu script, ontem mesmo estava querendo algo simples como isso, tenho mais de 200 postagens e observo por diversas vezes os visitantes chegarem no meu blog pelo Google num assunto e mesmo tendo mais conteúdo relacionado nas categorias e no hack de posts relacionados, acabam indo embora por preguiça de olhar os diversos marcadores... creio que um mapa de conteúdo aumentam as chances do pessoal conhecer o restante dos artigos...
    Gostei muito desta sua idéia de busca por um marcador específico, inclusive vou providenciar também um marcador tipo "Lista Completa" ou "Todos os artigos" para adicionar às postagens que quero que caiam nesta lista, e assim eu peneirar o que quero que apareça no "mapa do blog"!

    PS.: imagine um script adicional para listar somente o título das postgens no resultado desta busca, para visitantes com conexões mais lentas?

    Ótima dica, parabéns outra vez!
    Grande abraço,
    ;-)

    ResponderExcluir
  15. Robertoke: Os scripts são lindos, geram um visual mais requintado, mas faz seu site ficar lento. No meu template já tem scripts demais(posts relacionados, posts e comentários recentes entre outros).
    Às vezes algumas simplicidades produzem um efeito melhor.
    Obrigado pela visita e volte sempre!

    ResponderExcluir
  16. é bem conveniente fazer isso quando seu número de postagens ultrapassa 20 em cada categoria....

    ResponderExcluir
  17. Hugo: É por aí mesmo. E a anta aqui esqueceu de atualizar o post, porque não tenho mais a parte magazine abaixo das postagens...

    ResponderExcluir
  18. Fala blz...to de passagem pra da um confere nesses codigos,é que to tentando cria outra pgn tipo o blogroll da RÔ.
    Ô nossos avatars ai que show hein!!!
    Hasta la vista.

    ResponderExcluir
  19. Opa legal...então criei a nova pgn blgrol,usei o ink max-results ao envés de criar um post c/ a Rô mostra
    +deu certo...eu ja tinha design diferente para pgns...então só copiei o codigo e usei este link pras condicionais heheh fico massa a propósito coloquei se blog lá no meu bloglist espero que goste!!!
    abraço¨¨O¨¨¨¨O¨¨

    ResponderExcluir
  20. Muito obrigado! Excelente dica! Ficou ótimo no meu blog e muito mais prático e rápido sem scripts.

    Abração!

    Murilo

    ResponderExcluir
  21. Murilo: Que bom que essa dica lhe serviu. Obrigado!
    Um abraço!

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google