Colorful Popular Posts Widget for Blogger

Popular posts widget is an important widget for a blogger which shows most viewed post and also gives user a chance to see which contents are trending on the blog. By default, blogger gives a simple popular widget but you can customize it to get a more colorful and attractive widget. Today, I am going to share a Stylish popular widget with numbers.

 How To ?

• Go to your blogger account and select your blog.
• Then go to template and click on Edit Html (must make a backup) 
• Now find following code:

]]></b:skin>

• Paste the below code above it.

/* Custom Popular Post Widget Starts*/.PopularPosts ul,.PopularPosts li, .PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none;}.PopularPosts ul {margin:.5em 0;list-style:none;color:black;counter-reset:num;}.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left;}.PopularPosts ul li {background-color:#eee;margin:0 10% .4em 0 !important;padding:.5em 1.5em .5em .5em !important;counter-increment:num;position:relative;}.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-weight:bold;color:#000 !important;text-decoration:none;}.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}/* Set color and level */.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}.PopularPosts .item-thumbnail {margin:0 0 0 0;}.PopularPosts .item-snippet {font-size:11px;}.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;/* Custom Popular Post Widget Ends*/

• Save the template.
•  Now, if you have added Popular Widget already then skip this step, move to Layout and click Add a widget. Select 'Popular Widget'.

 Customization

•  You can customize the Popular Widget by showing image, snippet and increasing/decreasing number of posts to show.

• You can change background color and margin. find background-color / margin-right in above code and customize it. 
• Save after customization.

 You Like It ?

You comments are like Oxygen to us. Please don't hesitate to give as must as you can. Like and share this post with your friends.