Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadgetPostagens Populares, que exibe os posts mais acessados, baseando-se no serviço de estatísticas nativo.

No post Novo gadget – Postagens populares, ensinei como colocar o gadget na barra lateral (sidebar) do blog.

O problema é que em alguns templates – e os nosso estão incluídos – o gadget aparece desconfigurado. 

Perceberam que as setinhas aparecem em cima do texto? Para consertar isso, segui este tutorial do Mundo Blogger -  Instalar e personalizar o Gadget de Postagens Mais Populares do Blogger e fiz as alterações necessárias para o meu template.

Acredito que o código deve variar de template para template, mas vamos lá.

Entrem em design>editar HTML. Antes de ]]></b:skin>, colem o código abaixo:

#PopularPosts1 li{ 
padding-left: 15px; 
padding-top: 3px; 
}




A parte padding-left, se refere à distância que deve existir entre a imagem e o texto. Já padding-top, se refere à altura da imagem. Façam os ajustes nesses dois elementos e vá visualizando até ficar do modo correto e daí salve o template.


Além de acertar  a distância entre o texto e a imagem,  podemos aplicar estilos, usando  CSS. Para exemplificar, colocarei borda e plano de fundo no gadget:


#PopularPosts1 li{ 
padding-left: 15px; 
padding-top: 3px; 
} 
#PopularPosts1 .widget-content{ 
border: 1px solid #ccc; 
background: #efefef; 
}


Para mudar a cor do resumo dos posts, acrescente este trecho:


.item-content{ 
color: #1d85dd; 
}

Mude as cores a seu gosto. Se não sabe os códigos , acesse uma tabela de cores

O CSS final seria este, com as devidas modificações de acordo com cada template:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/ 
padding-left: 15px; 
padding-top: 3px; 
} 
#PopularPosts1 .widget-content{ /*Estilo para o conteúdo*/ 
border: 1px solid #ccc; 
background: #efefef; 
} 
.item-content{ /*Estilo para o resumo dos posts*/ 
color: #1d85dd; 
}

ATUALIZAÇÃO: Para retirar o ícone que vem antes do texto, substitua:

#PopularPosts1 li{ /*Estilo para acertar a imagem*/ 
padding-left: 15px; 
padding-top: 3px; 
}

por este outro código:

#PopularPosts1 li{ /*Estilo para retirar o ícone*/ 
background-image:none; 
}

Créditos de parte do código CSS ao Mundo Blogger