Gadget Postagens Populares colorido

 Olá a todos, eu hoje vou ensinar a colocar a Gadget das postagens populares coloridas, este gadget fica muito bem em qualquer tipo de site e podem ser editados de acordo com a cor que você acha que fica melhor com seu blog.
Vou colocar aqui est etutorial porque tenho reparado que muitos blogs/sites têm este Gadget e muito pensam que não da para colocar no blogger, pois pensam que é um plugin para WordPress, mas também é possível colocar no blogger através de algumas mudanças nos códigos HTML do seu blog/site.
Vamos começar:Antes de tudo, se tiver o Gadget de postagens populares inserido do seu site/blog tem de ser removido para poderem ser feitas as alterações.Apos o Gadget das postagens populares ser retirado você vai entrar em Modelo e entre en Editar HTML/JavaScript, e procure pelo seguinte código:/* Variable definitions:
Abaixo desse tag cole o seguinte código:
(apenas se for modelo clássico do blogger)

Se for modelo Antigo cole este código:
(se seu modelo for o clássico e já tiver colado o código acima não coloque este)

Depois do código acima colocado no seu HTML, você ainda dentro do HTML procure pela tag “]]>” (sem aspas) e antes dessa tag cole o seguinte código:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none;}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px;}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:”1″;}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:”2″;}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″;}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″;}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%;}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″;}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none;}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none;}

Agora ainda não terminamos, para o último codigo você vai procurar pela tag “” (o um código similar,sem aspas) e abaixo dessa tag cole o seguinte código:

E pronto fica feito, depois é só colocar normalmente os posts populares, aconçelho a colocar apenas 5 posts populares, são os recomendado.

Obrigado por lerem o meu tutorial, comentem e se tiverem dúvidas não hesitem em perguntar!