Display Thumbnails for Popular Posts in Blogger

I wanted to show thumbnails in my Popular Posts and I achieved this by using CSS.

Prerequisites:
The Popular Posts widget must be added to the Sidebar in your Blogger template.
Posts have a featured image. In Blogger, this is generally the first image in the post's HTML content. My featured image is 550px by 550px.
Post title and image thumbnail must be checked on the widget configuration options.

Modify the code below and replace #sidebar-right-1 with the name of your right sidebar section and replace #PopularPosts1 with the name of your popular posts widget/gadget.

Search for  </head> and paste the CSS below just above  </head>
The CSS

 <style type='text/css'>  
   #sidebar-right-1 #PopularPosts1 ul{padding:0;margin:0;}  
   #sidebar-right-1 #PopularPosts1 .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}  
   #sidebar-right-1 #PopularPosts1 .item-thumbnail{width:130px;height:130px;border-right:5px solid #fff;margin:0px 10px 0px 0px !important;position:relative;}  
   #sidebar-right-1 #PopularPosts1 .item-thumbnail img{position:relative;height:auto;width:100%;padding:0;}  
   #sidebar-right-1 #PopularPosts1 ul li{float:left;margin-bottom:5px;max-height:130px;min-width:250px;overflow:hidden;}  
  #sidebar-right-1 #PopularPosts1 ul li:first-child{background:#E7717D;}  
   #sidebar-right-1 #PopularPosts1 ul li:first-child + li{background:#C2CAD0;}  
   #sidebar-right-1 #PopularPosts1 ul li:first-child + li + li{background:#E7717D;}  
   #sidebar-right-1 #PopularPosts1 ul li:first-child + li + li + li{background:#C2CAD0;}  
   #sidebar-right-1 #PopularPosts1 ul li:first-child + li + li + li + li{background:#E7717D;}  
   #sidebar-right-1 #PopularPosts1 ul li:first-child + li + li + li + li + li{background:#C2CAD0;}  
   #sidebar-right-1 #PopularPosts1 .item-title{font:13px &#39;Arial&#39;, sans-serif;text-transform:capitalize;padding:5px 2px 5px;}  
   #sidebar-right-1 #PopularPosts1 .item-title a{color:#000;text-decoration:none;}  
   #sidebar-right-1 #PopularPosts1 .item-snippet{font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;padding-right:5px;}  
   #sidebar-right-1 .#PopularPosts1 .widget-content ul li{padding:0px 5px 0px 0px!important;}  
 </style>  

The :first-child CSS pseudo-class represents the first element among a group of sibling elements. In this case, it targets the first popular post in my list, li:firstchild.
To prevent my popular posts thumbnail from being pixelated I changed the following statement

 <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;): data:post.thumbnail' var='image'>  

to

 <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 550, &quot;550:550&quot;): data:post.thumbnail' var='image'>  

The images in my post are 550px x 550px.