Personalizar as postagens mais vistas do blog- modelo com imagens maiores

Há, aqui no blog, uma categoria que mostra algumas opções de personalização para as postagens mais visualizadas (ou postagens populares) do blog.
Reveja:

Postagens populares: tutoriais para personalizar

Hoje quero te mostrar uma opção mais moderna, mais limpa e muito bonita.
Veja:

Demonstração do tutorial

São 3 passos simples, vamos aprender?

Antes de começar leia isso!

1- Antes de começar qualquer alteração em seu template, mesmo uma simples como essa, faça sempre backup dele para evitar estragos caso algo saia errado.

2- E, tão importante quanto o backup é ler o tutorial todo antes de sair fazendo.
Só comece após ler o tutorial, ler os códigos e se certificar de haver entendido tudo.
Combinado?
Combinado.
Então, vamos lá!

Personalizar as postagens populares do blog

Para começar, claro, você precisa ter instalado em seu blog o gadget Postagens populares.
Faça assim: vá ao painel administrativo do blog, clique na aba Layout e escolha Adicionar um gadget.
A seguir escolha Postagens populares e  configure marcando o período em que deseja as exibições, a quantidade de posts exibidos e não marque a caixinha snippet.
Salve, arraste para onde deseja que fique, salve as alterações do Layout e clique na aba Modelo.

Aí clique em Editar HTML e dentro da caixa do código fonte tecle Ctrl+F.
Na barra de pesquisa que aparecer digite </head> e tecle Enter para localizar.
Abaixo de </head> cole o Código CSS e salve.

Agora, na barra de pesquisa digite </body> e tecle Enter.
Acima de </body> cole o Código Javascript que faz a personalização funcionar.
Salve.
Está prontinho!

Ah, sim, claro, os códigos:


Copiar os códigos

Dicas extras:

1- Caso seu template já possua alguma personalização nesse gadget o modelo que ensino aqui pode não funcionar.
É preciso remover a personalização anterior e aí colocar essa, exatamente como explico no tutorial.

2- No Código CSS quase tudo pode ser trocado/personalizado ao seu gosto e de acordo com as necessidades de seu blog.
Meu modelo usa imagens na largura de 300px. Se sua sidebar for mais larga ou mais estreita ajuste esse valor para caber certinho dentro da sua coluna lateral.
Lembre que o valor 300 se repete também no Código Javascript. Portanto, se alterar no Código CSS altere igualmente o valor no Código Javascript.

3- Cores são alteradas trocando o código hexadecimal precedido de #.

4- A fonte que está no modelo é Cambria. Altere para a fonte que desejar.

5- Alterações diversas no Código CSS são por sua conta. É muito fácil de editar mas precisa ter um conhecimento básico. Vá mexendo, testando, até chegar na aparência que deseja.


Gostou?
Então compartilha aí, meu povo!