How to Make Popular Post Widget Colorful

Widgets are very colourfull popular post plus icon and a sequence number that will surely make your blog look more cool lagi.Seperti what the demo, roughly ya like the picture above. This widget is very good for personal blog buddy.

Immediately, I set it up:

• Choose the Popular Posts widget configuration, make sure that you choose the type of widget in the form of thumbnails and titles.
• Put CSS code below and place it above the code]]> </ b: skin> or </ style>:

/* 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;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  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;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

• After that you save your template, and you're done.

Interested to see other tutorials, please see the related articles below. Greetings, may be useful for all bloggers.

Blogger

• Solution for a confused parse Adsense Ads
• Why Solve Error Javascript In Blogger
• Trendy and Elegant Website Campus, Free
• Hospitality Management application source code with a simple programming language C #
• For PHP applications CLOTHES Distro Online Shop

Related Posts

Related Posts with thumbnails and summary post for blogger

• Creating Cursor Blog Surrounded Three Stars Tailed While Finding information by going to my blog at google interested in sharing that might share a tutorial blog buddies already know about this article, How to make the cursor Blog surrounded three c ... [readmore]
• Making Headline News Cool Navigation Menu Below Because there is a friend who asked how to make the navigation menu under the headline news as I plug this blog, therefore I am posting the article "How to Make Breaking News Featured Below Navigati ... [readmore]
• Summy, Templates Full Features seo for your blog Summy Blogger Template is very professional  blogger template that is converted from word press theme to blogger with great effort. It has all things you are looking for like Clean Read mor ... [readmore]
• Tricks For Blogger's quickly recognized Hello bloggers. This time I want to share a tutorial on How to be famous fast Blog. In this tutorial I will share how you manage to blog a rapid famous in the eyes of the visitors as well as search ... [readmore]
• Optimizing Search Engine Blogger Being a blogger should certainly be aware of the fact that Google's policy changes and so short. This is done to punish spammers who apply black hat SEO techniques on their blogs to achieve the hi ... [readmore]
• Making Adsense Ads appear at end of article posting Its the same thing as creating ad placement under the title of the article, just different placement and code that will be in place, here's how: 1. Log in to your Blogger account2. Leading to the " ... [readmore]
• Trendy and Elegant Website Campus, Free Although only made ​​within 1 week, the application site for the campus has been pretty very good in my opinion. Sorce contained in this website include the application is for the entire academic in ... [readmore]
• Why Solve Error Javascript In Blogger I was able to visit other blogs to see the information, but unfortunately when I visited my blog to find java script error. Roughly like zoom: or like the following: Unfortunately they do ... [readmore]
• Blog description is Core For Visitors When someone surfing and searching for information on the Internet, what is actually written? True, visitors are looking for Blog Description. To write down what the content of our blog description ... [readmore]
• Create Image Spinning and distention When Touched Mouse Learning to blog is not going to ever end, because there will be many more new science, let alone to beautify the look of the blog. Blogs are lightweight, simple and has a lot of information needed ... [readmore]

Author: Unknown Location: Pangkalpinang, Bangka Belitung

Article How to Make Popular Post Widget Colorful, Published by Unknown on the day Tuesday, July 2, 2013. Hopefully this article can add your insights. Unknown a is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards