Gadget "Stats do blog"

Neste tutorial eu vou ensinar a colocar na sidebar o gadget "Stats" que mostra o número de visitas do blog, quantos comentários já foram feitos e quantas postagens já foram publicadas.

O tutorial original de 2012 tinha um resultado parecido com esse da imagem abaixo: 

Porém o site utilizado para gerar a quantidade de visitantes online não existe mais, e eu não consegui encontrar outro site que gerasse a mesma informação em formato de texto simples, apenas contadores com botões em imagem. Então, para o tutorial atualizado eu incluí uma sessão para mostrar todas as visitas do blog, e em baixo o contador de usuários online, o que nos dá um resultado como esse abaixo:

 O código também foi melhorado para otimizar melhor as imagens e linhas, vamos lá!

Antes de começar: Para que o código funcione os feeds do seu blog devem estar habilitados!

1. Vá até a sessão "Layout" do blogger, adicione um gadget de HTML/Javascript no seu blog e cole o código abaixo:

Código

<style>
.stats {
display: block;
border-bottom: 1px dashed #fd7d9e; /*Cor e estilo da borda abaixo de cada linha*/
}
.stats img {
max-height: 16px; /*Tamanho máximo dos ícones ou gifs*/
vertical-align: middle;
}
.numbers {
color: #feb1c0; /*Cor dos números e data*/
}
</style>
<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/>Desde: <span class="numbers">00/00/0000</span></div> 


<div class="stats"><img src="https://i.imgur.com/6lzXTZa.gif" /><script style="text/javascript">
function numberOfPosts(json) {
document.write('Posts: <span class="numbers">' + json.feed.openSearch$totalResults.$t + '</span><br>');
}</script>
<script src="LINK_DO_SEU_BLOG/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></div>

<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/><script style="text/javascript">function numberOfComments(json) {
document.write('Comentários: <span class="numbers">' + json.feed.openSearch$totalResults.$t + '</span><br>');
}</script>
<script src="LINK_DO_SEU_BLOG/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></div>

<div class="stats">
<img src="https://i.imgur.com/6lzXTZa.gif"/>Visitas totais: <!--CÓDIGO DO CONTADOR AQUI-->
</div> 
<br />
<!--CÓDIGO DOS VISITANTES ONLINE AQUI-->

2. Substitua a cor dos números e o estilo da linha da forma que preferir no local indicado no código;

3. Substitua "00/00/0000" pela data de criação do seu blog;

4. Substitua o texto LINK_DO_SEU_BLOG pelo endereço do seu blog nos dois locais que ele aparece. Cuidado para não deixar o código com duas barras, veja o exemplo abaixo:

✅Certo: "https://cherry-liah.blogspot.com/feeds/comments/

❌Errado: "https://cherry-liah.blogspot.com//feeds/comments/

5. Agora, para o contador de visitas, vá até o site supercounters.com e clique na opção "Hit counter":

 

6. Marque a opção "Text". Em "Text color" escolha a cor do texto, de preferência a mesma cor que você colocou na cor dos números no código do widget. Deixe o campo "Link text" vazio, e em "Initial Count" coloque o número de visitas atuais do seu blog, que pode ser visualizado na sessão "Estatísticas" do blogger. Depois é só clicar no botão "Submit"

configurações do contador 

Onde visualizar o número de visitas atual

7.  Copie o código que apareceu ao clicar em "Submit" e cole ele no widget no lugar do texto <!--CÓDIGO DO CONTADOR AQUI-->

8. No código que você acabou de colar, apague as partes indicadas na imagem abaixo:

Isso fará com que o contador fique alinhado direitinho

 

9. Opcional: Agora para os visitantes online, volte para a página inicial do Supercounters e clique em "Online Counter"

 

10. Configure a cor de fundo e a cor do texto, depois clique em "Submit" e copie o código que aparecer. Cole o código no lugar do texto <!--CÓDIGO DOS VISITANTES ONLINE AQUI-->

11. Para mudar os gifs do widget é só substituir os links destacados no código pelo link das imagens da sua preferência. Você pode achar gifs nos sites indicados na página links úteis ou se preferir ícones tradicionais você pode procurar por palavras-chave no site IconFinder.

Agora é só salvar o seu widget e ver o resultado! 

 Espero que tenham gostado do tutorial! Me esforcei para simplificar o máximo possível, mas caso tenha ficado alguma dúvida ou se o código não estiver funcionando, podem perguntar nos comentários ♥

Kissus, Liah