Estilos para o gadget Postagens Populares

Neste post vamos mostra vários modelos de Gadget de postagens populares, use a criatividade e deixe seu blog ainda mais bonito.

• 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/

Qualquer duvida, pode perguntar!

Facebook Page: www.facebook.com/blogmaisdicas  curti se gostou.