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





sajib shahik | 6:17 PM | 0 Comments


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 sajib shahik
I am a professional Graphic designer and web site designer.I always try to make my byers Happy with my work and my activities. See My portfolio.....







Stay Connected With Us
Feed Icon Twitter Icon Facebook Icon Google+ Icon Youtube Icon


Share and Spread Share On Facebook +1 This Post Digg This Post Stumble This Post Tweet This Post Tweet This Post Tweet This Post Save Tis Post To Delicious Share On Reddit Bookmark On Technorati


Related Articles

JOIN THE DISCUSSION

Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments

0 comments: