Cara Membuat Widget Popular Post Evo Magz Di Blogger - Berjalan

Popular post merupakan widget yang berisi urutan artikel yang paling banyak dibaca dan dibuka di blog kita. Widget ini uga bisa membantu pengunjung lain untuk mengetahui artikel yang paling popular dan bagus di blog kita.

Tentu pemilik blog harus memakai style / gaya popular post yang menarik untuk dilihat pengujung. Dan mungkin anda ingin memasang style popular post yang satu ini. Kali ini saya akan membagikan tutorial cara membuat widget popular post warna warni seperti evo magz.

Popular post pelangi ini adalah popular post yang hampir sama dengan popular post di template blog Evo Magz ori yang tentunya anda sudah mengetahuinya. Kesamaan yang bisa dilihat adalah dari tampilan warna yang ada.

Tampilan gaya warna-warni memang bagus untuk dilihat dan memanjakan mata. Widget popular post bisa ada tampilkan di sidebar atau footer blog. Untuk membuat widget popular post ini ana cukup menambahkan style CSS kedalam template untuk memasang popular post warna-warni. Bagi anda yang ingin memasang widget popular post maka ikuti langkah berikut

Cara Memasang Widget Popular Post Evo Magz

Langkah 1 (Buat Widget Popular Post)

Silakan masuk ke blogger,lalu klik Tata Letak → Tambahkan gadget → Entri Popular

Lalu klik simpan

Langkah 2

Silakan klik Template → Edit HTML ,lalu cari kode ]]></b:skin>

Langkah 3

Salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> 

.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%}

Ganti kode yang berwarna merah dengan kode warna yang anda inginkan

Lalu simpan template.

Selesai,sekarang lihat blog sobat untuk melihat hasil popular post yang telah dibuat. Itulah tutorial cara membuat popular post evo magz. Semoga bermanfaat.