Estilos para o gadget Postagens Populares

Resolvi brincar um pouco mais com o CSS e acabei decobrindo outros estilos que podem ser aplicados ao gadget Postagens Populares, criando assim uma continuação do  post Personalizando o gadget Postagens Populares.
Pelo que pude notar, as miniaturas de imagens só funcionam em posts que começam com uma imagem. Se a imagem estiver no meio do post, por exemplo, sua miniatura não vai aparecer no gadget. Como eu quase não usava imagens no topo dos meus posts, precisei pegar o blog do meu irmão “emprestado”, para realizar os testes.
Sabendo que a maioria  não tem intimidade com CSS, criei alguns estilos pra vocês usarem em seus blogs. Não se esqueçam que é preciso modificar as cores, a fim de que o gadget fique em harmonia com o template que vocês usam.
Estilo 1 – conteúdo com fundo transparente e sem borda
Neste modelo, usei um fundo transparente (para combinar com qualquer template), coloquei borda nas miniaturas e personalizei a cor do título e do resumo das postagens.

#PopularPosts1 .widget-content{  /*estilo para o conteúdo*/ padding: 3px;
}
#PopularPosts1 a {  /*cor do título*/ color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/ color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/ color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/ border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/ color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo da fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 2– conteúdo com fundo transparente e com borda
Neste outro modelo, mantive o estilo anterior, mas acrescentei uma borda ao gadget.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #333;
font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Estilo 3 – conteúdo com fundo preto e borda cinza
No estilo 3, coloquei cor no plano de fundo e mudei a cor do resumo dos posts.

#PopularPosts1 .widget-content{  /*Estilo para o conteúdo*/
padding: 3px;
border: 1px solid #ccc;
background: #333;
}
#PopularPosts1 a {   /*cor do título*/
color: #ff0000;
}
#PopularPosts1 a:visited {  /*cor do título visitado*/
color: #ff0000;
}
#PopularPosts1 a:hover { /*cor do título ao passar o mouse*/
color: #333;
text-decoration: underline;
}
#PopularPosts1 img{  /*borda e espaçamento da miniatura*/
border: 1px dotted #ccc;
padding: 5px;
margin: 2px 3px -7px;
}
.item-content{ /*estilo para o resumo dos posts*/
color: #fff; font-size: 90%;
padding-right: 5px;
}
.item-title { /*estilo a fonte do título*/
font-weight: bold;
font-size: 15px;
}

Para adequar ao template de vocês, mudem as cores em color e background. Talvez seja necessário mexer nas margens (margin) e preenchimentos (padding).
Em alguns templates, existem pequenos ícones (bolinhas, setas e etc), que antecedem o texto do gadget. Para retirar o ícone, acrescente este código:

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

Para manter o ícone e acertar o espaçamento com o texto, acrescente:

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

Mais completo que isto, impossível, né? Usem a criatividade e boa diversão o/