CSS Style Popular Post Widget with image

Popular Post Widget For Blogger With Image Thumbnail with aHover effect

See Also Scroll To Top Button For Blogger

Before Addig This, Check Our Another Popular Post widget:

• Customized Auto-Numbering with ahover effect Popular Post Widge(with out Image)
• Auto Numbering Popular Post Widget
• Simple Popular Post widget with Image

To add This Widget follow Following Steps:

• Go To Blogger dashboard.
• Go to Layout and Click On Add Gadget.
• Now select "Labels" and in setting "Check on Image and Snippet",Click on save button.
• Now after adding Labels Widget, Go  to Template and Click on Edit Template.
• Now Find Following Code  ]]></b:skin>
• Now Copy Following Code and Paste just above " ]]></b:skin> "

Code:

/*--- Allin1-Web: Pupular Post Widget Begin --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVayus6Wyg_VEqxqwZcQ-J6tudi2cVoIyp4whq7riidnE4HoK8BKcawlZT5YjKL1_cvhDcwcXV9iYvAaczdveX3K3dP-ZFZjcn_0poyChVh4aOJZldsP3l8JibFgPXhbnWNKW-AWEglKc/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/*--- Allin1-Web: Pupular Post Widget End --- */

For Same Style Without Image and Description

• Don't Check Box with label Image, Snippet.
• Copy Following Code and Paste Before  ]]></b:skin>

/*--- Allin1-Web Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

You May Like: Two Different CSS style Popular Post widget with and without Image