Gadget "Postagens mais visitadas" estilizado com efeito e também numeradas

Oi gente, hoje vou trazer uma estilização que é uma charme só para seu blog, falo do gadget "Postagens mais visitadas"

Então vamos começar!!!

1° Instale o gadget Postagens Populares, se já estiver instalado antes pule esta etapa.

2° Vá até Tema de seu blog e clique em Editar HTML. Dê um click dentro da caixa de códigos e em seguida CTRL+F para aparecer a caixa de busca e procure pela tag </head> cole o CÓDIGO CSS abaixo logo acima da tag e
salve.

<style type='text/css'>
 .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
 .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 200px;
position: relative;
}
 .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 120px;
width: 120px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
 .PopularPosts .item-thumbnail {
width: 120px;
height: 120px;
margin: 0px 10px 10px 0px !important;
position: relative;
}
 .PopularPosts .item-thumbnail:hover:before {
display: none;
}
 .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
 .PopularPosts .item-title {
font: 15px &#39;open sans&#39;, sans-serif;
text-transform: none;
padding: 0px 5px 10px;
}
 .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
 .PopularPosts .item-snippet {
font: 12px &quot;helvetica&quot;,Times,FreeSerif,serif;
}
 .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
 .PopularPosts .item-content {
padding: 5px 0px;
overflow: hidden;
height: 120px;
position: relative;
}
</style>

3° Vá novamente à barra de busca, procure pelo trecho data:post.featuredImage, 72, &quot;1:1&quot;
e tecle Enter para localizar.
Substitua o número 72 por 120 e salve.

Espero que tenha dado certo com você. Até a próxima!