Como aumentar a imagem do gadget de postagem mais visitadas na Blogger

Todo blogueiro que quer fazer sucesso, tem que antes pensar na aparência do seu blog, certo, como a organização e o funcionamento da lateral (sidebar) que é sem dúvidas de extrema importância. O gadget postagem mais visualizadas por exemplo é um item indispensável para a estrutura do seu blog, basicamente ele é usado para divulgar os posts mais vistos pelos seus leitores.

Hoje o tutorial é especialmente voltado ao gadget de postagem mais visualizadas, já que o modelo original do blog não é tão chamativo assim. Então vamos aumentar a imagem, e colocar um efeito fade ao passar o mouse foi inserido. O titulo do post vai ficar abaixo da imagem, dentre outras estilizações muito legais. Então chega de bla bla e vamos lá:

Pra começar:
Vá ao Layout do blog
Depois Adicionar um Gadget
Adicione o gadget Postagens mais visitadas
Em Mais visualizadas escolha a sua opção
Em Exibir marque a primeira opção
Em Exibir até escolha a quantidade de postagens a serem exibidas 
E por último Salvar

Agora vá Tema e depois em  Editar HTML, dê um clique dentro da caixa de códigos e aperte CTRL+F para aparecer uma caixa de busca, e dentro dela procure pelo trecho:

 ? resizeImage

Após encontrar o código vai aparecer também esse trecho:
? resizeImage(data:post.featuredImage, 72, "1:1")

Clique na imagem para melhor visualização

Nota: Esse trecho tem como função aumentar a imagem e deixa-la proporcional e com uma ótima qualidade. O número 72 aumenta o tamanho geral da imagem, todos os meu blogs e a maioria dos outros tem o tamanho de uma sidebar é 300px de largura, até mesmo pela questão de exibição dos anúncios do AdSense. E os números 1.1 dá qualidade a imagem, por favor aumente-o para 3:2

AGORA VAMOS A PARTE MAIS LEGAL QUE É A ESTILIZAÇÃO DESSE GADGET

Ainda na caixa de códigos aperte CTRL+F novamente e procure por ]]></b:skin> e acima desse trecho cole o seguinte código:

/** Início **/ #PopularPosts1 {padding: 0px; list-style: none;  margin-bottom: 10px;  text-align: center;  }  #PopularPosts1 a {  font-family: 'Arial', sans-serif; font-size: 13px;  color: #151515; text-transform: none;  font-weight: bold;  }  #PopularPosts1 a:hover {  color: #FF5899; }  #PopularPosts1 img {  padding: 8px 5px 5px 8px;  }  #PopularPosts1 img:hover {  -webkit-transition:All 0.7s ease-in-out;  -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;  filter:alpha(opacity=90);  -moz-opacity:0.4;  -khtml-opacity:0.4;  opacity:0.4; }  /** Fim **/

Pronto é só salvar e vê se deu tudo certo, caso tenha dado algo, revise se não esqueceu algo ou até mesmo pelo fato de você está usando um template pronto. Deixe seu comentário.