--------------------------------------------------------------------------------------------------------
ADD HTML JAVA WIDGET AND PASTE BELOW CODE
--------------------------------------------------------------------------------------------------------

<style type="text/css">
@charset "utf-8";
*, td, th, input, textarea, select, button {
font-family: Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
a:focus, select, input, textarea, button {
outline: medium none;
}
select {
padding: 1px;
}
ul {
list-style: none outside none;
}
img {
display: block;
}
a img {
border: medium none;
}
a {
text-decoration: none;
}
a {
color: #1D7FB4;
}
a:hover {
color: #FF250F;
}
a.black:hover {
color: #FF250F !important;
}
.widget {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQgaUmovhCdSO_ltTeVQ4d9zWifVJilD-196It4KieoJyZBESDk-ROCM-avMOVAyvTXcB4VOYzQQL3gce-Rdc8yU6ZUJp2dwsftYpQleQirZD4YhBBoOhG1NflLAEPrRvReStsjV5jcJy/") repeat scroll left top transparent;
border: 1px solid #B5B5B5;
text-align: left;
}
.widget .header {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmEdd585a94fuPhgteDIu4xWGXrL01nrZRsmnMvbbq0cVDmoQeg07gdpXzcikdb666LamzrFJ_cWS9KlLzPADo4GzFoRmDmQgA8BoRLvHT8Ah8tcAD5Bu9X803raMS9bU07iAt5BvZnng/") repeat scroll left top transparent;
padding: 5px;
}
.widget .header img {
float: left;
margin-right: 7px;
vertical-align: middle;
}
.widget h2 {
border: medium none;
color: #FFFFFF;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-size: 22px;
font-weight: normal;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.widget .header h2 a {
color: #FFFFFF;
display: block;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
text-decoration: none;
}
.widget .header h2 a strong {
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
}
#right_column .widget h3 {
border-bottom: 1px solid #B5B5B5;
color: #9F6101;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: normal;
margin: 10px 10px 0;
padding: 0 0 10px;
text-transform: uppercase;
}
.widget .header h3 a {
color: #9F6101;
display: block;
padding-top: 4px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}
.widget ul li {
padding: 10px;
}
.mp-item a, .mpl-item a {
text-decoration: none;
}
.mp-item {
background: none repeat scroll 0 0 #EDEAE9;
display: table;
height: 65px;
margin: 10px 10px 0;
padding: 0 !important;
width: 280px;
}
.mp-item .ablock {
display: block;
height: 65px;
position: absolute;
width: 280px;
}
.mp-item .number {
background: none repeat scroll 0 0 #454545;
color: #FFFFFF;
display: block;
float: left;
font-size: 18px;
height: 25px;
margin-right: 1px;
padding-right: 2px;
padding-top: 40px;
text-align: right;
width: 21px;
}
.mp-item:hover > .number {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
}
.mp-item img {
height: 65px;
padding-right: 10px;
width: 65px;
}
.mp-item .text {
color: #050505;
float: left;
font-size: 13px;
height: 60px;
line-height: 19px;
overflow: hidden;
padding-top: 5px;
text-decoration: none;
vertical-align: middle;
width: 178px;
}
.mp-item:hover > a img {
opacity: 0.9;
}
#popular {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -134px transparent;
border-bottom: 1px solid #CCCCCC;
display: block;
height: 20px;
margin: 5px 15px 0;
padding: 4px 0;
text-align: left;
}
#popular a, #most_recent a, #most_commented a {
color: #777777;
display: block !important;
font-size: 11px;
padding: 2px 0 0 25px;
text-align: left;
text-decoration: none;
}
#popular:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -134px #EDEAE9;
}
#most_recent:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -155px #EDEAE9;
}
#most_commented:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiISEOtU-jMCIfgXDobyvO-ZlgpAoDwCzhZJDp5e6aPmfSdn5ZNh-uOw0AnH2n7mcJSrEGWHEWGHZXHAPIoP_Y80qlltp1Spt-df9esC_NQyr1FC4RxFtOqe6dS81UhhZ9rEwnntNd-3iOJ/") no-repeat scroll 0 -203px #EDEAE9;
}
#popular a:hover, #most_recent a:hover, #most_commented a:hover {
color: red;
}
.mpl-item a {
text-decoration: none;
}
.mpl-item {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
float: left;
height: 140px;
margin: 15px 0 0 15px;
overflow: hidden;
padding: 0 !important;
width: 150px;
}
.mpl-item:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;
}
.mpl-item .ablock {
display: block;
height: 140px;
position: absolute;
width: 150px;
}
.mpl-item .number {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
color: #FFFFFF;
display: block;
float: left;
font-size: 18px;
height: 25px;
margin-right: 1px;
margin-top: 60px;
padding-right: 5px;
padding-top: 5px;
position: relative;
text-align: right;
width: 25px;
z-index: 3;
}
.mpl-item:hover > .number {
color: #FFFFFF;
}
.mpl-item img {
height: 140px;
position: absolute;
width: 150px;
z-index: 1;
}
.mpl-item .text {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgssoFWViWk-RKpoasctkUnZ0Fx1vP3wQJgdHEOAq5_04yi2RgdqWmeG3cW2CPI4zEmoQCgPh0GXvymqqV_v4F0NkY8kSS385DkTBhkvXMTTcbjJkDpHdOZKJ2WsKQCiiIZD5GqIIqPtB6/") repeat scroll 0 0 transparent;
color: #FFFFFF;
float: left;
font-size: 12px;
height: 60px;
line-height: 15px;
overflow: hidden;
padding: 3px 0 0 5px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: 145px;
z-index: 3;
}
.mpl-item:hover > .text {
background: none repeat scroll 0 0 #BB0004;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
}
#most_popular_home .pagination {
margin-left: 580px;
padding: 10px 5px 0 0;
position: absolute;
}
#most_popular_home .pagination .active, #most_popular_home .fpaginate .active, #most_popular_home .pagination a:hover, #most_popular_home .fpaginate a:hover {
background: none repeat scroll 0 0 #BB0004;
}
#most_popular .pagination {
margin-top: -10px;
padding-right: 5px;
}
#most_popular .pagination .active, #most_popular .fpaginate .active, #most_popular .pagination a:hover, #most_popular .fpaginate a:hover {
background: none repeat scroll 0 0 #BB0004;
}
.topa {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpmb-yHg_oPjHjSlq840G0yVoUHBlkGirKsW3CPcu60T9OgDpRPqII3hMbBHpDYzOeH8JAWmAi0fF6_Ueull6Rp3bozmTR047hQ2oyHNnrLSc9rDIGSW_HkLizjB9K5W380BVIwlgOclE/") no-repeat scroll right center transparent;
color: #FFFFFF;
display: block;
font-size: 12px;
margin-left: 550px;
margin-top: 9px;
padding-right: 14px;
position: absolute;
text-decoration: none;
}
#PopularPosts1 {
width:680px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#PopularPosts1 li.mpl-item').each(function (i) {
i = i+1;
text='<a class="number">'+i+'.</a>';
$(this).prepend(text);
});
});
//]]>
</script>

--------------------------------------------------------------------------------------------------------
STEP 2:  FIND THESE LINES  AND POPULAR POST
 WIDGET CODE IN YOUR SIDE BAR

<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
----------------------------------------------------------------------------------------------------------


<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<div class='header'>
<span class='icon block mp-icon'/>
<h2><strong>Most Popular </strong>stories<span class='clearfix'/></h2>
<div class='clearfix'/>
</div>
<ul>
<b:loop values='data:posts' var='post'>
<li class='mpl-item'>
<img expr:src='data:post.thumbnail'/>
<a class='ablock' expr:href='data:post.href'/>
<a class='text table-cell' expr:href='data:post.href'><data:post.title/></a>
<div class='clearfix'/>
</li>
</b:loop>
<div class='clearfix'/>
</ul>
<br/>
<span class='clearfix'/>
<b:include name='quickedit'/>
</b:includable>
</b:widget>