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.
0 Comentários