Cara Membuat Widget Popular Post Warna-Warni

Pada tutorial blog kali ini saya akan share mengenai Widget Popular Post yang akan dirubah atau dimodifikasi menjadi warna-warni. Untuk merubah / membuat widget popular post ini tentunya terlebih dahulu blog anda harus dipasang widget popular post dan kalau sudah dipasang maka akan dimodifikasi menjadi berwarna-warni dengan tambahan kode CSS dan pastinya tidak akan memberatkan loading blog. Nah penampilan dari popular post yang sudah dirubah berwarna seperti dibawah ini.

Cara Membuat Widget Popular Post Warna-Warni :
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut ini diatasnya

.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;
}

.PopularPosts ul li:nth-child(1) {background-color:#129700;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#0000FF;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FFA200;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#B300FF;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#FF00F2;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#B70000;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#00B795;margin-right:7%}

4. Selesai, simpan

Keterangan :
Silahkan anda rubah warna pink sesuai keinginan anda

Demikianlah Cara Membuat Widget Popular Post Warna-Warni, silahkan dicoba supaya blog anda terlihat lebih menarik, semoga bermanfaat.