How to add Multi-Colored Popular Posts Widget (V2) Blogger?

This tutorial will show you how to add different / multi colored Popular Post widget blogger. This widget is the most important part of this hack is that you do not need to add any heavy JavaScript or other scripts to use this hack with only CSS. In addition, you can customize the widget with the Blogger Template Designer.

Let's go to tutorial.

How to Add Multi-Colored Popular Posts Widget (V2) Blogger?

*Go to Blogger Dashboard -> Template -> Edit HTML -> Continue

*Back up your template before making any changes on your blog

*Now Expand Widget Templates

*Press Ctrl + F and find the code below

]]> </ B: skin>

Now paste the code below above / before

# PopularPosts1 ul li: hover {color: # fff; text-decoration: none}
# PopularPosts1 ul li {-webkit-text-size-adjust: auto;-webkit-text-stroke-width: 0px; color: # 333333; display: block; font-family: Georgia, "Times New Roman", Times, serif; font-size: 13px; font-style: normal, font-variant: normal; font-weight: normal, letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px ; orphans: 2; padding: 0px; text-align:-webkit-auto; text-decoration: none! important text-indent: 0px; text-transform: none; white-space: normal, widows: 2, word-spacing: 0px;}
# PopularPosts1 ul li
# 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
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li + Li + Li + Li + Li: after {position: absolute; top: 10px; right: 5px, border-radius: 50%; border: 2px solid # ccc; background: # 353535;-webkit-box-shadow: 0px 0px 5px # 000;-moz-box-shadow: 0px 0px 5px # 000, width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: # fff}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li + Li + li {background: # DF01D7, width: 90%}
# 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: # B041FF, width: 90%}
# PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li: after {content: "9"}
# PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li {background: # F52887, width: 90%}
# PopularPosts1 ul li: first-child + li + li + li + li + li + li + li + li + li: after {content: "10"}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + li {background: # 7ee3c7, width: 90%}
# 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: 90%}
# PopularPosts1 ul li: first-child + Li + Li + Li + Li + Li + Li: after {content: "7"}
# PopularPosts1 ul li: first-child + Li + Li + Li + li {background: # 33c9f7, width: 90%}
# PopularPosts1 ul li: first-child + li + li + li + li: after {content: "5"}
# PopularPosts1 ul li: first-child + Li + Li + li {background: # c7f25f, width: 90%}
# PopularPosts1 ul li: first-child + Li + Li + Li: after {content: "4"}
# PopularPosts1 ul li: first-child + li + li {background: # ffde4c, width: 90%}
# PopularPosts1 ul li: first-child + Li + Li: after {content: "3"}
# PopularPosts1 ul li: first-child + li {background: # ff764c, width: 90%}
# PopularPosts1 ul li: first-child + li: after {content: "2"}
# PopularPosts1 ul li: first-child {background: # ff4c54, width: 90%}
# PopularPosts1 ul li: first-child: after {content: "1"}
# PopularPosts1 ul {margin: 0; padding: 0px 0; list-style-type: none}
# PopularPosts1 ul li {position: relative; margin: 6px 0, limit-radius: 25px 0px 25px 0px; border: 2px solid # f7f7f7,-webkit-box-shadow: 3px 3px 3px # 000;-moz-box-shadow: 3px 3px 3px # 000; padding: 10px}

Now save the template

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

*Select "displays up to 9 posts" and remove the thumbnail of the image and a piece of

*Now Save the widget.

Enjoy!

By Unknown