Customize Popular Posts Widget With CSS3 In Blogger

SOCIALIZE IT →

Tweet

Popular posts is a blogger's common widget which shows your mostly viewed pages in a vertical row. we can customize this widget with css3. This widget was included in blogger default templates in 2011 and till now it is a great widget. Today I will teach you that how can we customize it with css3. This css3 code will work for both custom blogger template and default blogger templates. So follow the simple steps below in order to customize popular posts widget with css3.

Customize Popular Posts Widget With Css3

First Of All You Should Add Popular Posts Widget To Your Blog. To Add This Widget Follow The Steps Below :

→ Go To Blogger >> Layout >> Add A Gadget
→ Choose Popular Posts From The List And Setting Can Be Look Like The Image Below, You Can Make Changes As Your Own Choice And Than Click Save.

→ Now Go To Template Page Of Your Blog >> Edit Html >> Proceed

→ Tick Expand Widget Templates 
→ Find ]]></b:skin> By Using Ctrl+F

→ Copy The Code Below And Paste It Above ]]></b:skin>.

 .popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyMrf_g60f-BCb0mC-YSzwnWZqq-zOurILRfSwr1xUTjp9H6YlIGgJSn6O0kmsja_Ppm0xCa2Zlk-K0eQdSZzJJojqHbfM2cdUUxsPUrqvv2fPmy1saroIO3KrBH7mit15-q6JzBuQVvQ/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:2px solid #6BB5FF;
background:#FFFFFF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#78B6F4;
}
.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);
}

→ To Change The Hover Background Color Replace #FFFFFF With Your Choice Of Color Code.
→ To Change The Link Color Of Title Replace #78B6F4 With Your Choice Of Color Code.
You May Need To Use Our Color Code Chart , Click Here To Use It.

 Now Click Save Template. Visit Your Blog & Feel Great Difference In Popular Posts Widget.

Credits : 
This widget was originally shared on Onlineustaad & MyBloggerLab and I have just made little changes to it and shared it with you. So keep our site visiting regularly and get latest widgets.

Join Our Email Newsletter Now!

Join over 1,000 people who get free and fresh content delivered automatically each time we publish.

Get This Now!