Cara Membuat Widget Popular Post Keren di Blog

Memasang Widget Popular Post di Blog adalah hal yang wajib dilakukan oleh seorang blogger. Widget popular post berguna untuk memperlihatkan artikel mana yang paling sering dibaca oleh pengunjung.

Ada banyak sekali model design widget popular post yang ada di internet, tetapi disini saya akan memberikan tutorial membuat tampilan popular post yang unik dan menarik.

Baca Juga : Cara Membuat Featured Post di Blogger

Cara Pasang Widget Popular Posts Keren

1. Sebelumnya Pasang dulu widget popular postnya : Add a Gadget > pilih Popular Posts
2. Setting popular post seperti berikut ini:

3. Anda bisa tampilkan 10 judul daftar terpopuler.
4. Save!

Kode CSS Popular Post Keren

Sekarang saatnya mempercantik tampilan popular postnya dengan mengubah kode CSS pada blog.

1. Template > Edit HTML
2. Copy kode berikut ini di atas kode ]]></b:skin>

.widget .widget-item-control a img {
  border: none;
  width: 20px !important;
  height: 20px !important;
  padding: none;
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ie-box-shadow: none;
  box-shadow: none;
}
.sidebar .PopularPosts .widget-content ul li {
  padding: 0px 0px 0px;
  height: 73px !important;
  overflow: hidden !important;
  list-style-type: none !important;
  list-style: none;
}
.sidebar .popular-posts ul {
  padding-left:0px !important;
  list-style-type: none !important;
}
.sidebar .popular-posts ul {
  counter-reset: popcount;
  margin: 0; padding: 0;
}
.sidebar .popular-posts ul li:before {
  background: rgba(247, 247, 247, 1);
  color: #000000;
  content: counter(popcount,decimal);
  counter-increment: popcount;
  float: right;
  font-size: 15px;
  line-height: 20px;
  list-style-type: none;
  padding: 0px 6px 1px 5px;
  border-radius: 0px 0px 7px 7px;
  position: relative;
  display: inline-block;
  box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);
  font-weight: normal;
  top: 0px;
  right: 1px;
  z-index: 999999999999;
  border: solid #B5B5B5;
  border-width: 0px 1px 1px 1px;
}
.sidebar .PopularPosts .item-thumbnail {
  float: left;
  margin: 0px!important;
}
.sidebar .PopularPosts img {
  padding-right: 0px !important;
  width: 72px;
  height: 72px;
  overflow: hidden !important;
  margin-right: 0px;
}
.sidebar .PopularPosts .item-title a:hover {
  background: #f6f6f6;
  color: #000;
}
.sidebar .PopularPosts .item-title a {
  background: #EAEAEA;
  color: #6E6E6E;
  display: block;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
  font-family: "Oswald",sans-serif;    
  padding: 10px 30px 0px 78px;
  transition: all .4s ease-in-out;
  height: 62px;
  text-decoration: none;
  border-bottom: 1px solid #cccccc;}

Anda juga bisa meletakkan kode CSS diatas pada tag <style> atau </style>

Sekian dulu ya! pembahasan saya kali ini tentang Cara Membuat Widget Popular Post di Blog, mudah-mudahan bisa bermanfaat.