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://dl.dropbox.com/u/37432031/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://dl.dropbox.com/u/37432031/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.

Recomendamos também

2 comentários: