Modelo lindo para personalizar os posts mais visualizados do blog - * Blog Elaine Gaspareto *

Modelo lindo para personalizar os posts mais visualizados do blog

Publicado em 27/08/2018

Tempo de leitura:

Ao longo dos anos fui publicando várias e várias opções para personalizar as postagens mais vistas do blog, ou Postagens populares como em geral são chamadas. Falo daquele gadget nativo do Blogger que mostra até 10 posts mais vistos, e que pode ter a exibição definida por mais vistos de todos os tempos do blog (na verdade só contabiliza de 2012 pra cá), os mais vistos do ano passado, os mais visualizados dos últimos 30 dias ou os mais vistos da semana, que é o que eu prefiro para poder variar as postagens exibidas no gadget.

Sua versão nativa é funcional mas bem simples, então o ideal é personalizar.
Veja o modelo que trago hoje para te ensinar:


Demonstração do tutorial



Quer aprender os truques para ter esse modelo de postagens populares personalizadas em seu blog?
Vamos lá!
Comece acessando a página com os códigos que vamos usar:


Copiar o código


A seguir vá até o painel administrativo de seu blog (ou do blog de testes, como sempre sugiro) e clique na aba Layout. Aí clique em Adicionar um gadget e dentre as opções que surgirem escolha Postagens mais visitadas e configure assim:
Salve, arraste para onde deseja que fique e salve a alteração do Layout.
Caso seu blog já tenha o gadget Postagens mais visitadas instalado pule essa parte.

Agora clique na aba Tema de seu painel e a seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de pesquisa que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO CSS.
Salve.

Importante:
Esse CÓDIGO CSS é o código que define coisas como cores de fundo, cor do texto, etc.
Ajuste para combinar com seu blog e salve.
Calma que ainda não vai aparecer certo. Vamos adiante e depois voce pode voltar e editar cores e fontes.

Localize, na barra de busca, a tag de fechamento </body> e cole o CÓDIGO JAVASCRIPT acima dela.
Salve.

Agora vamos ao último ajuste, preste atenção!
Na barra de pesquisa digite data:post.featuredImage, 72, &quot;1:1&quot e localize.
(o trecho pode ser copiado na página com o código do tutorial)
Achou?
Troque o valor 72 por 500 e salve.
Visualize seu blog e veja se deu certo.
E tá pronto!

Como eu disse acima troque cores para combinar com seu blog.
Todas as cores são precedidas do símbolo # e ao trocar o código a cor muda.
Leia o tutorial inteiro mais uma vez antes de começar a fazer, teste antes em seu blog de testes e caso futuramente queira mudar de modelo de personalização basta ir refazendo os passos e excluir o que inseriu.
Falou, lindeza?








2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Que legal gostei que ele faz esse efeito de subir a imagem ao passar o mouse. Se eu não cagar nos códigos vou ver se personalizo com esse hahaha

    Apenas eu, Day

    ResponderExcluir
  2. Ola Elaine tudo bem ? Estou ficando velha rs... escreci um comentario para vc mas creio que nao foi... estou lendo tuas dicas mais antigas e tem alguns codigos la que nao sei aonde conseguir copiar... para testar... tenho um blog que esta parado anos e quero reativa-lo mas esqueci tudo rs.... meu site www.ArtesDeRosaCorujinha.blogspot.com e o email que estou usando eh Rosa.Corujinha@gmail.com.... agradeco de coracao se vc puder me retornar... grande abraco e tenha uma noite de sono renovadora !!! bjuuus

    ResponderExcluir

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.
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…