Blogger Editor: Popular Post Orange Template

648px x 516px

<style>
.PopularPosts h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
.PopularPosts ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
.PopularPosts li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
.PopularPosts ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
.PopularPosts ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
z-index: 5;
}
.PopularPosts ul li:hover{
background: #eee;
}
.PopularPosts ul li:hover:before{
transform: rotate(360deg);   
}
.PopularPosts ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
.PopularPosts ul li a:hover{
color: #444;
}
.PopularPosts .item-snippet {display: none;}
.PopularPosts .item-thumbnail {float: left; padding-right: 10px;}
</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>