Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger

O Blogger oferece um novo gadget, onde são mostradas as postagens mais populares do seu blog de acordo com o número de acessos que cada post teve.
Hoje vou ensinar não só como instalar este gadget mais como aplicar estilos a ele. Você verá que é possível criar uma variações de estilos CSS a serem aplicados a este gadget.

Como o próprio Blogger disponibiliza um gadget padrão para exibir uma lista dos artigos mais populares, nada melhor do que usar serviços nativos disponibilizados pelo próprio blogger, e que não dependem de scripts, o que o torna mais leve que os demais citados acima.
Este gadget usa as estatísticas de visitas para cada post publicado, assim determina quais são os posts mais populares de acordo com o período que você escolher.

Para instalar este gadget, entre na aba "design" → Clique em "Adicionar gadget"→ Escolha "Postagens populares (Novo!)"



Configure as informações que deseja exibir:
- Escolha o período de estatísticas de visualizações.
- Escolha se deseja que apareça um resumo e uma miniatura de imagem abaixo do link do título do post e determine a quantidade de posts que serão exibidos na lista.



Depois é só salvar e pronto!

Aplicar estilos ao gadget de Postagens mais populares:

Você pode personalizar esse gadget como preferir, incluindo código CSS definindo estilos de sua preferência.
Veremos as opções de personalização deste gadget.

Se você já personalizou os links da sua sidebar de acordo com este tutorial:
Personalizando os links da sidebar, caso já tenha incluído ícones ao lado dos links,não será necessário incluir ícones novamente, pois as configurações aplicadas aos links da sidebar serão aplicadas automaticamente aos widgets que utilizarem links.
Mas pode ser que seja necessário que você faça alguns ajustes nos espaçamentos, caso tenha ficado desta maneira como na imagem no exemplo abaixo:

Imagem retirada do blog: Escritos Ideológicos

O que fazer para corrigir isto?
Entre na aba "Design" → "editar html" e procure pela tag: ]]></b:skin>
E acrescente logo ACIMA dela, o código a seguir:

#PopularPosts1 li{
padding-left: 10px;
}

Se for necessário, ajuste o valor em padding-left.

Caso queira personalizar ainda mais este gadget, Veja os códigos que você terá que acrescentar para definir os estilos.
Como existem muitas variações de estilos a serem aplicados a este gadget, vou destacar cada elemento informando o que cada um representa.
Os estilos deverão ser aplicados por você.

Entre na aba "Design" → "editar html" e procure pela tag: ]]></b:skin>
O código CSS deverá ser colados logo ABAIXO dela, definindo os estilos á sua escolha para cada elemento contido no código:

#PopularPosts1 li{/*Estilo para os links da lista*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos links dos itens da lista-->
}

#PopularPosts1 .widget-content{ /*Estilo para o container geral*/
<!--coloque aqui os estilos que você quer que sejam aplicados ao Container geral do gadget-->
}

.item-title{  /*Estilo para os títulos dos posts*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos titulos dos posts-->
}

.item-content{ /*Estilo para os itens da lista*/
<!--coloque aqui os estilos que você quer que sejam aplicados aos itens da lista-->
}

.item-snippet {/*Estilo para resumo do ultimo post*/
<!--coloque aqui os estilos que você quer que sejam aplicados para resumo do ultimo post-->
}

Agora basta usar a criatividade e ajustar as cores e espaçamentos de acordo com o modelo de seu template.
Lembre-se sempre de ir visualizando antes de salvar as alterações.
Se estiver tudo do jeito que você quer,salve e pronto!


Veja um exemplo do que você pode fazer:



E ai gostou? Então espalha na rede! ;)