Modelo pronto para personalizar as Postagens mais vistas do blog

Um dos gadgets nativos do Blogger que eu mais gosto e considero essenciais para aumentar o engajamento do leitor com as postagens é, sem dúvida, o gadget que mostra os posts mais vistos/mais lidos/mais acessados.
Ao longo do tempo mostrei aqui no blog vários modelos prontos para personalizar o gadget de Postagens populares. Recorde:

Postagens mais lidas/mais vistas do blog- como personalizar

Hoje quero mostrar essa opção, que é muito bonitinha e ocupa um espaço reduzido no layout do blog:

Demonstração do tutorial
Quer aprender?
Vem comigo!

Como instalar o gadget Postagens mais vistas no blog?

Importante: você precisa, claro, já ter instalado em seu blog o gadget Postagens mais visitadas.
Se não tem faça assim:
Acesse a aba Layout (ou Design, é a mesma coisa) de seu blog e clique em Adicionar um gadget. Na caixinha de opções que aparecer escolha Postagens mais visitadas.
Configure para exibir 10 posts, deixe desmarcada a caixinha Snippet e selecione o período que deseja (eu sugiro mostrar os posts mais vistos da semana). e salve.
Arraste para onde deseja que fique e salve as alterações do layout.
Caso já tenha o gadget instalado em seu blog pule essa parte.

Como personalizar as Postagens mais vistas do blog?

Antes de mais nada acesse a página com os 2 códigos necessários à realização desse tutorial:

Copiar os códigos

A seguir acesse o painel de seu blog e clique na aba Modelo.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de pesquisa que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

Agora preste atenção!
No alto do seu código-fonte tem uma caixinha escrito Ir para um widget, com uma setinha ao lado. Clique na setinha; essa ação vai fazer aparecer todos os gadgets que voce tem instalados em seu blog.
Localize o gadget PopularPosts1 e clique nele.
Voce será levado ao código do gadget, que começa com <b:widget e termina com </b:widget>
Selecione todo o trecho do código e substitua-o pelo CÓDIGO HTML que forneci pra você, lá no blog Códigos para seu blog.
Fez isso?
Salve.
Tá pronto!

Se tudo deu certo (claro que deu, #temfé) seu resultado será exatamente igual ao do meu blog de demonstração.
Quer mudar cores? Simples!
Todas as áreas editáveis do código estão marcadas em CAPSLOCK no CÓDIGO CSS.
Altere cores (aqui tem uma tabela com os códigos das cores), tamanho de fontes, etc.

Vídeo do tutorial

Pra facilitar sua vida tem vídeo-aula da realização do tutorial.
Aperta o play e inscreva-se no canal; ele é um apoio aos tutoriais do blog e eu agradeço muito sua inscrição!

Aproveita que tu tá por aqui e clica em curtir ao final do post... ou deixe seu comentário dizendo 'oi"...
Diz oi pra mim...