15 de maio de 2016

Como criar um índice com todos os posts por categoria no Blogger


Ter um índice pode ser muito útil para seu blog, já que ele ficará com uma lista com todos os posts do seu site organizado por categorias, fazendo uma espécie de biblioteca ou mapa do site.

Vamos fazer este índice utilizando o FeedBurner do seu blog, para isso é preciso que o seu Feed já esteja configurado no FeedBurner.

Tutorial:

1- Acesse o Painel do Blogger
2- Escolha se quer mostrar esse índice usando o post ou página.
3- Clique em Editar HTML do post ou página e adicione o seguinte código:
<script src="http://www.webcreative.com.br/cb/js/Indice-categoria.js">
</script>
<script src="http://ENDEREÇO DO SEU BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Altere o ENDEREÇO DO SEU BLOG e clique em publicar.

Podemos também dar uma estilizada no índice, para isso use este código:

<style type="text/css">
.label p {
background: #F7902A;  /*–edite cor de fundo–*/
border-bottom: 2px solid #B50505; /*–edite cor e estilo de borda–*/
margin-top: 30px;
padding: 10px;
width:90%;
text-decoration:none;
}
.label p a:link{
color:#FFFFFF;  /*–edite cor do link do titulo–*/
text-decoration:none;
}
.label p a:visited {
    color: #fff;  /*–edite cor do link do titulo depois de visitado–*/
}
.label p a:hover{
color:#000000; /*–edite cor do link do titulo–*/
}
.label li {
margin:0;
border-bottom:1px dashed #CCCCCC; /*–edite cor e estilo de borda–*/
}
</style>
<div class="label">
<script src="http://www.webcreative.com.br/cb/js/Indice-categoria.js">
</script>
<script src="http://ENDEREÇO DO SEU BLOG/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Usando o código acima o seu índice vai ficar mais elegante, você pode editar ele com as cores do seu blog, para isso altere os códigos em <style>, está bem documentado e não terás dificuldade em mudar.

Veja aqui o resultado final

Dúvidas? deixe nos comentários.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

8 comentários

Coloquei no meu blog e funcionou, valeu!

Legal Sandro! Qualquer coisa estamos aí.

Abs

Olá Ebrahim,
usei o código no blog e ficou muito bom, mas hoje fui dar uma olhada nas páginas e percebi que ele não está funcionando mais. Por acaso houve alguma atualização?

Obrigado!

Esqueci...
Este é o link da página:
http://www.professorjunioronline.com/p/todo-conteudo-do-blog.html

Obrigado novamente!

Olá,

Atualizei o post há 2 dias sim, o que mudou eh o endereço do arquivo js que fazia o script funcionar.

Tive de mudar por conta de novos parâmetros no Dropbox onde estava hospedado.

É só refazer o tutorial.
Abs

O endereço para o JS é: http://www.webcreative.com.br/cb/js/Indice-categoria.js

Obrigado Ebrahim.
Obrigado também pelas demais informações compartilhadas com os leitores do seu blog.

Até mais!

Boa tarde, professor!

Eu estava usando o seu índice por categoria, de repente ele parou, já atualizei com suas novas dicas, mesmo assim continua dando problema. Instalei como uma página no meu blog, o meu FEEDBURNER é este: http://www.kalopsitamansa.com.br/feeds/posts/default

Desde já agradeço pela atenção.

Mauricio


Abrir lista de emoticonFechar lista de emoticon