CARA MEMBUAT POPULAR POST KEREN WARNA WARNI

Cara Membuat Popular post Keren Warna Warni - Popular post kali ini adalah lanjutan dari postingan kemarin tentang menciptakan bermacam-macam popular post keren. Widget popular post kali ini merupakan popular post colorfull menggunakan penomoran. Cara Membuatnya pun cukup mudah. Berikut tutorial cara membuat popular post pada blog colorful disertai nomor :

1. Log in ke akun blogger sobat
2. Klik template dan edit HTML
3. Cari kode berikut ]]> setelah ketemu tempatkan kode ini dia sempurna diatas kode tersebut yg aku sebutkan.

.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(tiga) background-color:#FECB09;margin-right:3%
.popularPosts ul li:nth-child(4) background-color:#6EBE27;margin-right:4%
.popularPosts ul li:nth-child(lima) background-color:#149A48;margin-right:lima%
.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%

4. Klik pratinjau kemudian klik simpan.
Baca juga cara menciptakan bermacam-macam popular post keren lainnya.