Cara Memasang Widget Popular Post Dengan Automatic Numbering

Apakah bisa menambah widget popular post dengan penomoran otomatis? keren,kan?.Seperti yang kalian tahu,Widget populer post/entri popular merupakan hal yang sangat berpengaruh bagi blog kalian,karena berguna mempercantik tampilan maupun memperbanyak pengunjung blog kalian.

Cara Menambahkan Entri Popular

• Blogger > Tata Letak
• Klik "Tambahkan Gadget"  
• Pilih "Entri Populer"
• Kalian harus mengatur terlebih dahulu tampilannya,jangan centang/uncheck "Thumnail Gambar" dan juga "Cuplikan" agar tampilan menjadi lebih rapi. 

• Simpan!!!

Cara Mengatur Plugin Entri Popular

• Blogger > Template
• Backup Template dahulu
• Klik "Edit HTML" 
• Cari code  </b:skin>. Klik panah hitam yang berada disamping kiri code tersebut
•  Copy code dibawah ini dan letakkan tepat diatas </b:skin>

  /*--- MBT Popular Posts --- */
  .popular-posts ul {
  padding-left: 0px;
  counter-reset: popcount;
  }
  .popular-posts ul li:before {
  list-style-type: none;
  margin-right: 15px;
  padding: 0.3em 0.6em;
  counter-increment: popcount;
  content: counter(popcount);
  font-size: 16px;
  background: #292D30;
  color: #ffffff;
  position: relative;
  font-weight: bold;
  font-family: georgia;
  float: left;
  border: 2px solid #dddddd;
  box-shadow: 1px 2px 9px #666666; }

  .popular-posts ul li {
  border-bottom: 1px dashed #dddddd;
  }
  .popular-posts ul li:hover {
  border-bottom: 1px dashed #696969;
  }
  .popular-posts ul li a {
  text-decoration:none; color:#5A5F63;
  }
  
  .popular-posts ul li a:hover {
  text-decoration:none;
  }

Pengaturan:

1. Untuk mengganti warna background ,tinggal edit #292D30
2. Untuk mengganti warna teks,tinggal edit #ffffff
3. Untuk mengganti ikon persegi menjadi lingkaran,tinggal tempelkan code dibawah ini sesudah code box-shadow: 1px 2px 9px #666666

border-radius:15px;

• Simpan dan lihat hasilnya!!