Blogger Editor: Popular Post Colorize Template

648px x 516px

<style>
.PopularPosts ul{margin:0;padding:5px 0;list-style-type:none; font-family: Oswald,Sans-Serif;}
.PopularPosts ul li{position:relative;margin:5px 0;border:0;padding:10px}
.PopularPosts ul li:first-child{background:#ff4c54;width:97%}
.PopularPosts ul li:first-child:after{content:"1"}
.PopularPosts ul li:first-child + li{background:#ff764c;width:87%}
.PopularPosts ul li:first-child + li:after{content:"2"}
.PopularPosts ul li:first-child + li + li{background:#ffde4c;width:84%}
.PopularPosts ul li:first-child + li + li:after{content:"3"}
.PopularPosts ul li:first-child + li + li + li{background:#c7f25f;width:81%}
.PopularPosts ul li:first-child + li + li + li:after{content:"4"}
.PopularPosts ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
.PopularPosts ul li:first-child + li + li + li + li:after{content:"5"}
.PopularPosts ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
.PopularPosts ul li:first-child + li + li + li + li + li:after{content:"6"}
.PopularPosts ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
.PopularPosts ul li:first-child + li + li + li + li + li + li:after{content:"7"}
.PopularPosts ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
.PopularPosts ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
.PopularPosts ul li:first-child:after,
.PopularPosts ul li:first-child + li:after,
.PopularPosts ul li:first-child + li + li:after,
.PopularPosts ul li:first-child + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li:after,
.PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:20px;color:#fff}
.PopularPosts ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
.PopularPosts ul li a{font-size:15px;color:#444;text-decoration:none; font-family: Oswald,Sans-Serif;}
.PopularPosts ul li a:hover{color:#222;text-decoration:none}
.PopularPosts img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
.PopularPosts img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
</style>

<div class='widget PopularPosts' data-version='1' id='PopularPosts1'>
<h2>
Popular Posts</h2>
<div class='widget-content popular-posts'>
<ul>
<li><div class='item-content'>
<div class='item-thumbnail'>
<a href='/' target='_blank'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxz8OvzH2BCIS9F2PIyfF91zQAIj4e0nascSdSmPFx34-0hxVRYxIOJPOPl3Kk0A6ifD1xqIIXSg3clJnvuA2bHUjYlsYGFlKT5ni3rzmnHP7WuHASprIELJuOGx7p4X69ypoir-Rmvg/s1600/1.jpg'/></a></div>
<div class='item-title'>
<a href='/'>How not knowing weight loss supplements makes you a rookie</a></div>
<div class='item-snippet'>
Expose: you're losing money by not using preventative medicines. 6 ways fitness programs can find you the love of your life. Why cholest...</div>
</div>
<div style='clear: both;'>
</div>
</li>
<li><div class='item-content'>
<div class='item-thumbnail'>
<a href='/' target='_blank'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7zVpURaByEkgmB1GU6lk2HZ82cmOXQ19gM1VQd10WHboulHDGWa7PUCcJtg8oB_O8YkqSGUIXzWrf65lPNBKwhDfaBSRJvn5o7qgzP7lCQWDIAJUcBmGCgrL4SjA6d-EMXD0tHWZLBQk/s1600/2.jpg'/></a></div>
<div class='item-title'>
<a href='/'>Will makeup brushes ever rule the world?</a></div>
<div class='item-snippet'>
The oddest place you will find celebrity houses. The 15 best lifestyle blog youtube videos. Why you'll never succeed at celebrity gossip...</div>
</div>
<div style='clear: both;'>
</div>
</li>
<li><div class='item-content'>
<div class='item-thumbnail'>
<a href='' target='_blank'><img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggaygZwwoMmK041gMY3Hjq5juF5IHMyVQKAA5yD4qHnOZqg5b6ksRC7bxifXTr4Cwf9zs7W3IFtlxS-ySR14q0jt2OqKHT2XiIu8Zd-ri_PfbUlYCzzZLpGzXJLaxJCdLy8C3k1hCt7ws/s1600/3.jpg'/></a></div>
<div class='item-title'>
<a href=''>Why unique dresses are on crack about unique dresses</a></div>
<div class='item-snippet'>
Why do people think trendy cloths are a good idea? If you read one article about women cloths read this one. The 8 biggest fashion magazine ...</div>
</div>
<div style='clear: both;'>
</div>
</li>
</ul>
</div>
</div>