Como colocar um contador de tempo de leitura de cada post no blog - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Como colocar um contador de tempo de leitura de cada post no blog

Publicado em 19/09/2018

Como colocar um contador de tempo de leitura de cada post no blog
No tutorial de hoje eu vou te mostrar como colocar em seu blog um contador que marca o tempo aproximado que será gasto na leitura de cada post do blog.
Não sabe do que estou falando? Olha ali abaixo do título desse post. Viu a marcação Tempo de leitura? Então, é disso que estou falando.

Vou te mostrar como inserir em seu blog, é simples e fácil e com meu tutorial vai ser mole mole de fazer.
Antes, porém, um aviso:
Comece, como sempre eu recomendo, testando em um blog de testes. Assim você ganha confiança, se familiariza com o passo a passo e quando fizer em seu blog real vai se sentir mais seguro.

Como colocar o contador de tempo de leitura no blog?


Agora sim, vamos trabalhar?
Acesse a aba Tema do blog onde vai instalar o contador de tempo de leitura do post.
Aí clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de busca que expandir digite </body> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO JAVASCRIPT.
Salve.

Localize a tag de fechamento ]]></b:skin> e acima dela cole o CÓDIGO CSS.
Salve.

A seguir, na barra de busca, digite <div class='post-header-line-1'/> e localize.
Aparecerão (provavelmente) 2 ocorrências dessa linha.
Estamos em busca da 2ª ocorrência, ok?
Abaixo da linha localizada cole o CÓDIGO HTML e salve.

Entre em qualquer post e espere o carregamento da página. Seu contador já estará aparecendo.
Ah, ia esquecendo, os códigos necessários ao tutorial:


Copiar os códigos

Como colocar um contador de tempo de leitura de cada post no blog

Alertas muito úteis para instalar o contador de tempo de leitura sem erros


1- O contador está configurado para aparecer somente nas páginas internas do post. Na página inicial ele não funciona corretamente. Então deixe como eu fiz, ok?

2- Colar o CÓDIGO HTML abaixo de <div class='post-header-line-1'/> vai colocar seu contador abaixo do título do post.
Pode ser em outro lugar? Pode, mas aí é por sua conta, ok?

3- Cor do contador, tamanho da fonte e posicionamento você altera no CÓDIGO CSS. Deixei marcado onde alterar caso queira, ok?

Qualquer dúvida diga aí nos comentários e caso sua pergunta não esteja já contemplada no tutorial eu respondo tão logo seja possível.
Aproveite, divirta-se!
Blogar tem que ser divertido...
Né?






2 comentários

  1. No meu blog não tem a linha div class='post-header-line-1'
    Uso o tema contempo. Não tem nenhum lugar parecido pra colocar...

    ResponderExcluir
    Respostas
    1. Rafael, os novos temas responsivos tipo Contempo, Soho, Notável e Emporio não permitem edições, praticamente nenhum tutorial funcionará com eles.
      Infelizmente...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…