[Tutorial] Mapa automático no blog

15/02/2016 || || ||
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 ~

10 comentários:

  1. Oooi Hari! <3

    Ai cara, finalmente encontrei um tutorial de arquivo que funciona! Porque sério, já testei mil tutoriais diferentes e nenhum funcionou no meu blog! Mas ainda estou pensando se mantenho a página de arquivos manual que criei ou se coloco o código, porque como você disse tem essa limitação esquisita...
    Mas de qualquer forma, obrigada pelo tutorial! <3

    ResponderExcluir
    Respostas
    1. Estava difícil, né? Eu procurei alguns também, mas nada! Que horror! Agora sei porque a guria de um tempo atrás estava procurando esse tutorial, sabe? Depende, eu gosto da sua página do jeito que está, mas é realmente bem cansativo ficar atualizando, não tenho saco pra isso -q
      De nada, que bom que gostou <3

      Excluir
  2. Adorei os modelos, eu acho um máximo esses mapas te ajuda muito. os dois são bonitos e a explicação está ótima.
    Eu tenho que ajeitar os meus mais ai vou demorar a ver isso

    ResponderExcluir
    Respostas
    1. Obrigada, os modelos foi eu quem fiz, que orgulho de minha pessoa <3 Também adoro esses mapas, facilita muito o trabalho na hora de fuçar aquele blog que você gosta.

      Excluir
  3. Yoo Hari-senpai~ Beleza?

    Eu amo dar umas organizadas em qualquer coisa que seja meu, mas o problema é que como sou EU, tenho uma preguiça do tamanho do nunca e daí sempre vou "empurrando de barriga" rsrsrs :P
    Mas achei muito legal esses códigos, ajuda muito na organização! Eu não sei porquê, mas não gosto de mapas :s Eu acho melhor só colocar um Gadget de Arquivo do Blog e deu U.U Rsrsrsrs
    Mas ótimo código! ^^
    Chu~

    ResponderExcluir
    Respostas
    1. Também gosto, mas segue o mesmo motivo que você, aí dá aquela preguiça, agora que estou sem tempo é pior ainda...
      Eu adoro mapas, é uma pena eles terem esse limite estranho, mas também nem faço questão de mostrar os posts antigos, sabe como é, né? A vergonha domina, vamos apagar esses posts da nossa memória shuashua Eu, pelo contrário, não gosto de usar o gadget de arquivo, não sei se é porque ele é estranho ou porque não gosto mesmo, sei lá... Adoro usar mapas mesmo -q

      Excluir
  4. eu nem sabia que existia um tutorial desse rsrs Eu gostei do segundo modelo, mas queria saber se tem como eu selecionar quais marcadores eu quero que fique?

    Com carinho, Hina | Aishiteru em Contos |

    ResponderExcluir
    Respostas
    1. Isso, eu procurei pakas por algum tutorial parecido e nada me veio. Acho que não dá pra selecionar os marcadores porque é pelo feed, ou seja, independe dos marcadores e sim dos posts.

      Excluir
  5. Ai, grazadeus! Estava precisando desse tutorial muito mesmo, e eu lembrava de tê-lo visto em algum lugar mas não lembrava onde, LOL
    Sem contar que nunca nenhum tutorial de arquivo funcionou em meu blog, nada funciona no meu blog, é uma caceta mesmo -QQ
    Obrigada por postar isso <3

    ResponderExcluir
    Respostas
    1. shuashsau aí está o/ Por nada, se quiser mais alguma ajuda relacionada a qualquer coisa -e se eu souber, claro- avisa que eu posto aqui

      Excluir

Vai comentar? Leia as regrinhas:

~ Pode abusar dos palavrões o quanto quiserem, mas ofensas serão excluídas. Caso queiram criticar, críticas construtivas por favor;
~ "Seguindo, segue de volta?" Sim, mas fale um pouco do post também;
~ Pedidos? Fiquem a vontade;
~ Lemos a todos os comentários e sempre os respondemos;
~ No fim do comentário deixe o link de seu blog, se gostarmos, seguimos com prazer .

Pode comentar agora!