Tuesday, July 2, 2013

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

Author: Sendi Karlita Location: Pangkalpinang, Bangka Belitung

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

0 comments:

Post a Comment

Enter your email address:

Delivered by FeedBurner

 

© 2013 BLOG AMAZONE ZONA - Designed by Mukund | ToS | Privacy Policy | Sitemap

About Us | Contact Us | Write For Us