How to add stylish multicoloured popular post widget

Popular posts is a widget provided by blogger which shows a list of most viewed posts from your blog.Recently we provide a hack about customizing blogger's official popular posts widget now using same trick we will customize popular posts widget with awesome style.The main part of this hack is you don't need to add any heavy JavaScript or any other scripts we will apply this hack with using only CSS. Also you can customize this widget with using blogger template designer.Let's go to the tutorial.


HOW TO ADD DIFFERENT/MULTI COLORED POPULAR POST WIDGET TO BLOGGER

•     Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
•     Backup your Template before making any changes to your blog
•     Now  Expand Widget Templates
•     Press Ctrl+F and search the code shown below
•     Now Find the code shown below using Ctrl+F

                                                        ]]></b:skin>

Now Paste the Code Shown Below just above/before it

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}

#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}

#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts3 img{

    -moz-border-radius: 130px;

    -webkit-border-radius: 130px;

    border-radius: 130px;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    transition: all 0.3s ease;

padding:4px;

    border:1px solid #fff !important;

    background: #F2F2F2;}#PopularPosts1 img:hover {

    -moz-transform: scale(1.2) rotate(-560deg) ;

    -webkit-transform: scale(1.2) rotate(-560deg) ;

    -o-transform: scale(1.2) rotate(-560deg) ;

    -ms-transform: scale(1.2) rotate(-560deg) ;

    transform: scale(1.2) rotate(-560deg) ;

}

Now save your template

     Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts

     Select "display up to 9 posts".


    Now Save the widget your done !