[Tutorial] Mapa automático no blog

Oi oi! Não sei se já usei essa imagem -q. Eu tô meio cansada da faculdade, sabe aqueles dias que você chega em casa e só pensa em cama? Sou eu agora. Mas vim aqui no blog pra deixar o meu sinal de vida e encher o saco de vocês. Enfim... Me pediram há um tempo como se faz mapa de blog, se tiver dúvida do que significa isso, aqui mesmo no blog há uma página com o mapa. É aquela página que há todos os posts do blog. Vim trazer dois mapas diferentes, os códigos são extensos, mas não são complicados de entender, tá tudo explicadinho nos mínimos detalhes, se tiverem algum dúvida, seja lá quando você estiver lendo -pode ser até no ano de 3018- perguntem. Vamos lá começar o/

Vá nas páginas de seu blog e crie uma nova página, pode colocar o nome que quiser, isso não é importante. Lá no canto, em baixo do título do seu blog, tem um botão escrever e ao lado tem um botão de nome "HTML" clique nele. Agora é só escolher um modelo abaixo e fazer as modificações necessárias. Se você sentir-se mais confortável, também pode copiar em um bloco de notas antes de passar direto para o blog. 

Modelo 1 - Por data (preview)

<style type="text/css">
.label p { /*títulos/marcadores*/
width: 99%; /*tamanho da área*/
font-family: Oswald; /*tipo da fonte*/
font-weight: lighter; /*fonte mais fina, apague se não quiser*/
letter-spacing: 1px; /*espaço entre as letras*/
font-size: 16px; /*tamanho da fonte*/
text-shadow: 0px 0px 1px #dadada; /*sombra da fonte*/
text-decoration:none;
-webkit-transition-duration: .60s;
}
.label p a:link {
color:#024a58;  /*cor do link do titulo*/
text-decoration:none;
}
.label li {
margin:0;
border-bottom: 1px solid #426962;  /*cor e estilo de borda*/
}
.label li:hover {
box-shadow: inset 800px 0px 5px #e0f0e7; /*fundo que aparece ao passar o mouse*/
-webkit-transition: all .60s;
}
.label li a:link {
color:#77be98;  /*cor do link das postagens*/
text-decoration:none;
-webkit-transition-duration: .40s;
}
.label li a:link:hover {
color:#676767;  /*cor do link das postagens quando passa o mouse*/
text-decoration:none;
-webkit-transition-duration: .40s;
}
</style><div class="label"><div class="post-body entry-content" id="post-body-6044989173538787490" itemprop="description articleBody"><script src="http://yourjavascript.com/312010123412/indiceautomatico.js"></script><script src="LINK/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script></div></div>

Onde eu deixei em negrito, é pra você colocar o link completo do seu blog, completo que quero dizer, é com http, sabe? Exatamente do jeito que você copia no navegador. Darei um exemplo com o link do DdO:

diario-otome.blogspot.com - Errado
http://diario-otome.blogspot.com.br - Certo

Visualize e salve, se der erro no código, verifique se na parte "LINK/feeds" tem apenas uma barra, ok? Se tiver duas barras, apague uma delas.

Modelo 2 - Por marcador (preview)

<style type="text/css">
.label p { /*títulos/marcadores*/
border-bottom: 2px solid #bbb; /*linha em baixo do título*/
margin-top: 3px; /*espaço do topo*/
width: 99%; /*tamanho da área*/
font-family: courier new; /*tipo da fonte*/
font-size: 16px; /*tamanho da fonte*/
text-shadow: 0px 0px 1px #dadada; /*sombra da fonte*/
letter-spacing: -1px; /*espaço entre as letras*/
text-decoration:none;
-webkit-transition-duration: .60s;
}
.label p a:link {
color:#ccd8e5;  /*cor do link do titulo*/
text-decoration:none;
}
.label li {
margin:0;
border-bottom: 1px solid #c3d8e5;  /*cor e estilo de borda*/
}
.label li:hover {
padding-left: 15px; /*espaço recuado quando passa o mouse*/
box-shadow: inset 0px 12px 5px #f4f7f9; /*sombrinha que aparece ao passar o mouse*/
-webkit-transition: all .60s;
margin:0;
}
.label li a:link {
color:#ccc;  /*cor do link das postagens*/
text-decoration:none;
-webkit-transition-duration: .40s;
}
.label li a:link:hover {
color:#676767;  /*cor do link das postagens quando passa o mouse*/
text-decoration:none;
-webkit-transition-duration: .40s;
}
</style><div class="label"><script src="http://static.tumblr.com/fmf4w4k/H3Dn5ql09/indice-categoria.js"></script><ul><script src="LINK/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></ul></div><span style="font-size: 70%;">Widget by <a href="http://www.abu-farhan.com/" target="_blank">Abu Farhan</a></span>

Mesmo esquema, onde tá em negrito, você substitui pelo link completo do seu blog com http e tudo, o resto das modificações estão indicado. No mais, repete-se tudo que foi dito acima. 

Gosto desse mapa porque ele é automático, ou seja, não é preciso ficar atualizando ele, os posts novos vão automaticamente para o mapa. A questão é: Já testei os dois e, não sei porque raios de motivo, eles possuem um limite de posts que eles podem exibir, o primeiro modelo só consegue mostrar 153 posts e o segundo consegue 199. Se você tem mais posts que isso, funciona assim: Cada vez que você publica um post, o mais antigo da lista some para dar lugar ao novo. Isso é bom para quem quer esconder os post antigos porque eles são uma vergonha, mas pra quem não quer, o jeito é fazer manualmente mesmo. 

Enfim... O tutorial foi esse! Espero que gostem e creditem a tia aqui porque deu um trabalhinho mais ou menos pra fazer o tutorial, ok? Valorizem o tempo da pessoa que vos escreve <3. Fui ~