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.

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.