Modelo lindo para personalizar os posts mais visualizados do blog

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?