Tutorial: Como aumentar as imagens das postagens populares - BLOGGER
Oi gente ♥ Se tem um drama que nós, blogueiros do blogger, enfrentamos é esse gadget de postagens populares. O gadget não é lá muito bonito e a imagem é pequena, é uma coisa tão old né? haha. Eu não estava feliz com aquele gadget e saí a procura. Eis que eu achei um tutorial que deu super certo, mas em inglês.

Esse tutorial foi atualizado em 23/09/2016.

Como eu sei que muita gente gostaria de deixar as postagens populares mais bonitos, com a miniatura maior e personalizada, resolvi fazer esse tutorial ensinando a aumentar o tamanho das imagens e deixar o visual mais bonitinho. Antes era preciso um script pra isso, que parou de funcionar. Agora é MUITO MAIS FÁCIL mudar.
Passo 1. Faça um backup do seu layout. Isso é importante, você não quer perder seu lay. Você pode fazer de dois jeitos, criar um blog de testes, copiar todo o código do seu layout pra esse blog, os gadgets e manter tudo a salvo lá, ou pegar o código e salvar no bloco de notas. Qual código? Aquele que fica em Modelo > Editar HTML. Certifique-se de copiar tooodo ele, do começo ao fim. 
Passo 2. Vá ao painel do blogger, clique em layout e adicione um gadget onde você quiser (sidebar). Selecione o “Postagens Populares”. Nas opções, eu costumo deixar apenas 3 posts, e os mais visto dos últimos 30 dias, mas fica ao seu critério. 
Tutorial: Como aumentar as imagens das postagens populares
Passo 3. Vá em “Modelo”. Clique em “Editar Html”. Clique na caixa com o códigos, aperte ctrl+f e procure a seguinte tag: 
post.featuredImage, 72,
Vai aparecer algo assim:

? resizeImage(data:post.featuredImage, 72, "1:1") 

O 72 é o tamanho do quadrado, eu costumo deixar 250 que é o tamanho da minha sidebar, então você coloca o tamanho da sua sidebar.

O 1:1 é a proporção, é só trocar para 3:2

Cuidado com as vírgulas na hora de alterar.


Passo 4. Aperte ctrl+f e procure por ]]></b:skin> , antes disso, cole:

.popular-posts ul {
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.popular-posts a {
    font-size: 10pt;
    text-transform: uppercase;
}

.PopularPosts .widget-content ul li {
    padding: 0px;
    list-style: none;
    margin-bottom: 10px;
}

.PopularPosts .widget-content ul li:hover {
    opacity: 0.7;
}

Isso vai deixar seu gadget alinhado e lindo. Agora é só salvar e ser feliz! 

Gostou do tutorial? Tem muito mais na página EXTRAS do blogger. Não quer perder nenhuma dica ou tutorial sensacional, nem material exclusivo muito legal que está por vir? Cadastre-se no butlariz, e seja avisado por e-mail!