Add Colorful Popular Post Widget In Blogger Blog

Dear Friends In Todays Discussion I Tell You How To Add Colorful Popular Post In Blogger.This is very easy method you just need to put the CSS code in the HTML template blog . First prepare the necessary materials , the CSS code and expertise to tamper with the template , of course, you already have it . For its CSS code later going I gave , and most importantly, this tutorial you listen properly . Here are the steps you should do :

How To Add Colorful Popular Post Widget In Blogger?

• Log On To Blogger Dashbord
• Now Go To Template Section
• Use Ctrl+F And Search for ]]></b:skin>
• Paste Below Code Just Below It.

/* Custom CSS for Blogger Popular Post Widget */ .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; /* Set color and level Popular Post */ .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; }

Now Save Template And Enjoy This.