estilo no gadget de postagens populares com CSS

Artigos populares é um dos gadgets importantes em um blog, o estilo padrão nem é tão agradável  mas temos várias formas de personalização e com a ajuda do grandioso CSS podemos dar estilos muito bacana, já mostrei algumas delas nos seguintes artigos.

1. Destacar o artigo mais popular do blog
2. Widget de artigos populares coloridos 

 E no artigo de hoje aprenderemos mais uma forma simples e fácil de personalização.

 

Na imagem acima temos o resultado final assim que aplicamos o estilo, e para conseguir este feito basta seguir os passos abaixo.

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Agora procure por ]]></b:skin>  e cole antes o seguite código. 

popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguwtwfLD7sG1bsI30K2MVC-lb1Rl4u-CzWX7k3HEfapE2rZbeG3bLDCHzCX7DXSguIFUwKooBaQuKDjJXiAswnuQJyVbcKkO3YYb2PxyJ4z_hfbK2RAyHe719JfhCFoiaNsbzfsHx-ldvm/s128/popular.jpg) no-repeat scroll 0px 2px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 2px solid #094c74;
border-radius:10px;/* radio del borde */
-moz-border-radius:10px;/* radio del borde */
-webkit-border-radius:10px;/*  radio del borde  */
}
.popular-posts ul li:hover {
border:2px solid #094c74;/* color de borde al pasar en cursor */
}
.popular-posts ul li a:hover {
text-decoration:none;
}

3º-  Agora temos que instalar o Gadget de artigos populares, para isso vá em Layout  > Adicionar um Gadget e adiciona Postagens populares.

OBS: Para que funcione corretamente precisamos desmarcar a opção miniatura de imagem como foi mostrada na imagem anterior

Gostou? Compartilhe mas não esqueça de deixar seu comentário.