Como personalizar o gadget postagens populares do Blogger II

Olá amigos Mult-focos já postamos aqui como personalizar o gadget postagens populares do Blogger e agora vamos postar mais uma personalização para este gadget muito utilizado por blogueiros. Se você não viu o primeiro é só clicar aqui.
Bem sem mais delongas, vamos ao tutorial.


Primeiro adicione o gadget Postagens populares.

Segundo configure-o assim.

 Terceiro vá a modelo>Editar HTML>com o auxilio de Ctrl+F procure por
]]></b:skin>

Quarto acima desta tag cole o código abaixo, visualize e se estiver tudo ok, salve.
Bem pessoal isto é tudo.

 .PopularPosts h2{
padding-right:.4em;
padding-left:1em
}
.popular-posts ul { padding-left: 0;
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li { 
border-bottom: 1px solid #ffffff; 
list-style: none outside none !important; 
margin-left: 0 !important; 
overflow: hidden; 
padding: 10px 0 !important; 
transition: all 0.25s linear 0s;
counter-increment: trackit;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #ffffff;
float:left;
margin-right:10px;
} /* creates counter before lists */


.PopularPosts li:first-child{
border-top:1px solid #000000
}


.PopularPosts li:nth-child(even)
{background:#0099ff
}/*define background color for even number lists*/


.PopularPosts li:nth-child(odd)
{background:#00FF00
}/* define background for odd number lists */


.PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet { 
display: true!important}/* Hides Thumbnail and Snippet */


.PopularPosts a, .PopularPosts a:hover{
color:#ffffff;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}