Membuat Widget Popular Post Versi Mas Sugeng Terbaru

Widget Popular Post merupakan widget yang harus ada pada sebuah blog, dari berbagai usmber yang telah saya baca rata-rata menyarankan untuk memasang widget ini. Karena dengan ada widget popular post pembaca akan lebih mengatahui artikel mana yang banyak disukai oleh pembaca lainnya. Oleh sebab itu saya membuat artikel Membuat Widget Popular Post Versi Mas Sugeng Terbaru

Widget yang saya bagikan ini merupakan widget yang sama persis dengan desain yang ada pada tempate evo magz buatan mas-sugeng, dan ini hasil clone atau tiruan yang saya buat. Karena dessain yang lama bedanya hanya pada bentung numbered angka yang berbentuk kotak dan yang baru berbentuk lingkaran.

Cara Memasang Widget Popular Post Versi Mas Sugeng

Pertama, Silahkan tambahkan kode CSS dibawah ini sebelum ]]></b:skin> 

 /* 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;
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 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}

.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
  content: counter(num) !important;
  font-family: arial, sans-serif !important;
  font-size: 12px;
  font-weight: bold !important;
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 16px;
  background-color: #333;
  color: #fff !important;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  padding-right: 0px !important;
  border: 2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
} 

Kedua, simpan. 

Lihat hasilnya apakah Widget Popular Post Versi Mas Sugeng sudah terpasang dengan baik.

Jika sebelumnya sudah menggunakan versi yang lama silahkan hapus terlebih dahulu yang lama sebelum menggunakan yang ini.

Semoga bermanfaat..silahkan komentar jika bingung.