Adding the Popular Posts Slider Widget

Adding the Popular Posts Widget

Firstly go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget 
in the desired location and save the template.
Remember to check the Item Snippet and Image Thumbnail option.

Adding the CSS

Now we have to add the CSS of the Popular Posts customized widget, for this go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]>

 in search box. After getting the code add the below given code just above ]]>

/* Popular Posts Widget customized by AllBloggerTricks.com */
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }
.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }

.item-content:hover img {transform: rotate(10deg) scale(1.2);}

.item-content { position: relative; }

Also note that you have removed all the previous Popular Posts CSS codes (if any) before adding 
this one or the result will be the combination of the two.

Adding the JS

Usually Popular posts widget do not require any JavaScript, but this one needs in order to resize the popular posts image and cut short the snippet.
To add the JS, search for 
 and paste the below given code just above it.

   

After adding the code save the template. PS. Remove the code in red if you already have it in your template.