Blogger Editor: Popular Post Note Template

648px x 516px

<style>
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts ul li {
width: 100%;
list-style: none;
padding: 0;
margin-bottom: 20px;
position: relative;
border: 0;
}
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
height: 120px;
}
.PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px Times New Roman,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.PopularPosts .item-title {
font: 15px Oswald, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px Times New Roman, Times, FreeSerif, serif;
text-align: center;
}
</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>