Cara Membuat Popular Post Keren Berwarna

Popular Post merupakan kumpulan artikel-artikel yang paling sering di baca pengunjung blog, dengan adanya widget Popular Post maka pengunjung blog mengetahui mana-mana artikel yang sering di baca atau di cari pengunjung lainya.

Banyak macam variasi widget Popular Post dari yang biasa sampai yang dimodifikasi atau  dari yang sederhana sampai yang berwarna-warni.

Di kesempatan kali ini, saya akan coba share cara membuat popular post keren berwarna.
Dengan memasang widgert Populer Post ini, tampilan halaman blog akan semakin terlihat indah dan cantik, yang tentunya akan menarik minat pengunjung.

Baca juga: Cara Membuat Popular Post Bergambar.

.
Penasaran dengan widget Popular Post ini..? 

Ikuti langkah-langkah berikut ini:

Masuk ke Blog
Klik Tata Letak kemudian Tambahkan Gadget
Pilih Popular Post
(pada settingan popular post centang thumbnail dan hapus centang cuplikan)
Kemudian klik Simpan

Langkah selanjutnya Klik Tema

Klik Edit HTML (klik backup/pulihkan untuk berjaga-jaga)

Pada kolom HTML cari kode ]]></b:skin> 

Untuk mempercepat pencarian pada kolom edit HTML klik kanan di mana saja lalu tekan CTLR+F

Akan muncul kolom pencarian di pojok kanan atas

Ketikan kode yang di cari pada kolom pencarian lalu Enter

Setelah ketemu tempatkan kode berikut tepat diatas kode ]]></b:skin>

.

isi dengan teks yang di inginkan
.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%}

Langkah terakhir klik simpan.

Demikian panduan tentang cara membuat popular post keren berwarna.

Semoga bermanfaat dan selamat mencoba.