1. متوفرة بشكلين مختلفين يمكنك إختيار ما تشاء
2. إظهار صورة الموضوع + العنوان بشكل أنيق
3. سهلة الإضافة والتخصيص 
4. يمكنك التعديل عليها بسهولة وتغير أبعاد الصور 
5. ترقيم للتدوينات بشكل جميل

1. الدخول إلى حسابك > قالب > تحرير Html 
2. قم بأخذ نسخة إحتياطية من القالب تحسباً لأى أخطاء لا قدر الله
3. ستقوم بالبحث عن هذا الوسم </body> وستقوم بوضع هذا الكود قبلة مباشرة

* الخطوة الرابعة نبحث عن هذا الوسم ]]></b:skin> ونضع الكود التالى قبلة مباشرة




الشكل الأول كما هو موضع بالصورة السابقة




/***** المشاركات الشائعة / الشكل الأول *****/

.sidebar .popular-posts ul {

  counter-reset: popcount;

  margin: 0;

  padding: 0;

  }

.sidebar .popular-posts ul li:first-child {}

.sidebar .popular-posts ul li {

  height: 130px;

  list-style: none !important;

  overflow: hidden;

  padding: 0 !important;

  position: relative;

  margin: 2px;

  border: 0;

  width: 48%;

  float: left;

  }

.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}

.sidebar .PopularPosts ul li img {

  display: block;

  float: left;

  padding: 0;

  width: 100%;

  height: 130px;

  -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/

  -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/

  -o-transition-duration: 1.0s; /*Opera Animation duration*/

  transition:1.0s;

  }

.sidebar .PopularPosts ul li img:hover {

  -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/

  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/

  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/

  transform:scale(1.06);

  overflow: hidden;

  }

.sidebar .PopularPosts .item-title {

  bottom:0;

  left: 0;

  right: 0;

  padding-bottom: 0;

  position: absolute;

  z-index: 999;

 }

.sidebar .PopularPosts .item-title a {

  background: rgba(32, 32, 32, 0.77);

  color: #FFFFFF;

  display: block;

  font-size: 12px;

  line-height: normal;

  padding: 5px 0px 2px 5px;

  text-transform: capitalize;

  transition: all .4s ease-in-out;

  }

.sidebar .popular-posts ul li:hover .item-title a {

  color: rgba(255, 255, 255, 1);

  background: rgba(231, 76, 60, 0.88);

  text-decoration: none;

  }

.sidebar .popular-posts ul li:before {

  background: rgba(255, 252, 8, 1);

  color: #000;

  content: counter(popcount, decimal);

  counter-increment: popcount;

  float: left;

  font-size: 14px;

  line-height: 20px;

  list-style-type: none;

  padding: 0px 8px 1px 1px;

  border-radius: 0px 0px 10px 0px;

  position: absolute;

  top: 0;

  z-index: 4;

  border: solid #FFF;

  border-width: 0px 2px 2px 0px;

  }

الشكل الثانى

/***** المشاركات الشائعة / الشكل الثانى *****/

.sidebar .popular-posts ul {

  counter-reset: popcount;

  margin: 0;

  padding: 0;

  }

.sidebar .popular-posts ul li:first-child {}

.sidebar .popular-posts ul li {

  height: 130px;

  font-weight: bold;

  list-style: none !important;

  overflow: hidden;

  padding: 0px !important;

  position: relative;

  margin: 2px;

  border: 0;

  width: 100%;

  float: left;

}

.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}

.sidebar .PopularPosts ul li img {

  display: block;

  float: left;

  padding: 0;

  width: 100%;

  height: 130px;

  -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/

  -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/

  -o-transition-duration: 1.0s; /*Opera Animation duration*/

  transition:1.0s;

  }

.sidebar .PopularPosts ul li img:hover {

  -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/

  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/

  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/

  transform:scale(1.06);

  overflow: hidden;

  }

.sidebar .PopularPosts .item-title {

  bottom:0;

  left: 0;

  right: 0;

  padding-bottom: 0;

  position: absolute;

  z-index: 999;

 }

.sidebar .PopularPosts .item-title a {

  background: rgba(32, 32, 32, 0.77);

  color: #FFFFFF;

  display: block;

  font-size: 16px;

  font-weight: bold;

  line-height: normal;

  padding: 10px 0px 5px 10px;

  text-transform: capitalize;

  transition: all .4s ease-in-out;

}

.sidebar .popular-posts ul li:hover .item-title a {

  color: rgba(255, 255, 255, 1);

  background: rgba(231, 76, 60, 0.88);

  text-decoration: none;

  }

.sidebar .popular-posts ul li:before {

  background: rgba(255, 252, 8, 1);

  color: #000;

  content: counter(popcount, decimal);

  counter-increment: popcount;

  float: left;

  font-size: 14px;

  line-height: 20px;

  list-style-type: none;

  padding: 0px 8px 1px 1px;

  border-radius: 0px 0px 10px 0px;

  position: absolute;

  top: 0;

  z-index: 4;

  border: solid #FFF;

  border-width: 0px 2px 2px 0px;

  }

* تخصيص الإعدادات حتى تعمل بالشكل الصحيح معك :

يجب عليك تخصيص الإعدادات حتى تعمل معاك بالشكل المطلوب كما هو موضح بالصورة التالية  

         تم بحمد الله أى إستفسار حاضر بإذن الله       

1. تسجيل الدخول إلى الصفحة الرئيسية 
2. التخطيط > إضافة أداة جديدة
3. إختار أداة جافاسكريبت وضع بها الكود التالى

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="hadystore.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>