Customize Popular Post Widget In Blogger

 Do you need to change your Blogger’s well-liked Posts contraption to create it additional outstanding and enticing for your visitors? Having a preferred Posts contraption within the sidebar has infinite blessings. It helps new guests to select those articles that area unit most trending on an internet site. However, Blogger’s intrinsical well-liked posts contraption isn't that a lot of attention-grabbing in terms of coming up with and displaying. Therefore, if you want to remodel your well-liked Posts contraption into a masterpiece then, you've got to suppose CSS vogue sheets. when various request from our loyal readers, finally we've got set to share our custom well-liked post style that we have a tendency to area unit victimisation on this web log. In today’s article, we are going to reveal its CSS piece of paper.

How To Add Popular Post Widget In Blog ?

• The Steps are extremely straightforward so you can easily customize your widget without facing any problem what so every. Just follow the following instructions.
• Go To blogger >> Your Blog >> Layout.
• Click on Add A Gadget >> Select Popular Post Widget >> Click on save button.

Must Read:- Related Post Text Widget For Blogger

Adding CSS Code In Blog Template

• Search ]]></b:skin> in your template byr pressing Ctrl+F
• Just Before/Above ]]></b:skin> paste the following code.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSfYG2MYfX0QT5lQ3PgVI9RRjebrz0wFLKllChgNAdN9GXp_txMMYQ7IkaLKCKIEfd79seRhCQmPsXitA6xLgPNkymse10avr6hvmUFO_27Zm3iEmhAuH4pm9Pld_MXLtleIR06nSi1iQ/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);
}

•  Press save button in your template and finally you customize your popular post widget.