Personalizando o gadget Postagens Populares

Um dos vários recursos recém lançados pelo Blogger, foi o gadget Postagens 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. Vejam um exemplo na imagem abaixo:

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;
}

Este post foi criado à pedido de querida leitora Lucy – Amor e Paz Sem Fronteiras
Créditos de parte do código CSS ao Mundo Blogger, um dos meus blogs favoritos