Widget Posts Keren Multi Color

MULTI PASTE - Selain untuk menampilkan artikel yang paling sering di baca oleh pengunjung, widget popular posts juga dapat di modifikasi sehingga tampilannya akan menjadi lebih menarik.  Pada kesempatan ini, saya akan membagikan kepada Anda widget popular posts ala plugin popular posts milik wordpress.

Widget ini tampil multi warna, dengan label angka dari 1 sampai 9 pada sisi kanan, diurut berdasarkan tingkat popularitas artikel.  Artinya, artikel yang paling sering dibaca pengunjung akan menempati posisi teratas dengan label angka 1  disusul artikel populer berikutnya dengan label angka 2 dan seterusnya sampai artikel yang paling rendah popularitasnya.

Widget ini sebenarnya adalah widget bawaan blogger yang dimodifikasi menggunakan sedikit tambahan kode CSS yang harus ditanamkan ke dalam dokumen HTML templates.  Untuk kecepatan loading widget, tidak banyak perpengaruh karena selain kode CSS, tidak ada penambahan external script seperti javascript ataupun kode HTML.  Silahkan klik tombol di bawah ini untuk melihat demonya.

Kembali ke pokok bahasan, untuk memodifikasi widget popular posts, agar tampil dalam bentuk multi color, ikuti langkah implementasi seperti di bawah ini :

• Login ke blogger dengan ID Anda

• Pada halaman dashboard blogger klik menu Template

• Sebelum melakukan perubahan pada dokumen HTML template biasakan untuk melakukan backup template terlebih dahulu.

• Klik menu Template > Edit HTML, kemudian cari kode ]]></b:skin>

• Tambahkan kode berikut ini tepat di atasnya

• #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
  #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
  #PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
  #PopularPosts1 ul li:first-child:after{content:"1"}
  #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
  #PopularPosts1 ul li:first-child + li:after{content:"2"}
  #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
  #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
  #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
  #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
  #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
  #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
  #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
  #PopularPosts1 ul li:first-child:after,
  #PopularPosts1 ul li:first-child + li:after,
  #PopularPosts1 ul li:first-child + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
  #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
  #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
  #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
  #PopularPosts3 img{
      -moz-border-radius: 130px;
      -webkit-border-radius: 130px;
      border-radius: 130px;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
  padding:4px;
      border:1px solid #fff !important;
      background: #F2F2F2;}#PopularPosts1 img:hover {
      -moz-transform: scale(1.2) rotate(-560deg) ;
      -webkit-transform: scale(1.2) rotate(-560deg) ;
      -o-transform: scale(1.2) rotate(-560deg) ;
      -ms-transform: scale(1.2) rotate(-560deg) ;
      transform: scale(1.2) rotate(-560deg) ;
  }

• Simpan template dengan menekan tombol Save Templates

• Jika Anda sudah pernah menambahkan widget popular posts bawaan blogger, silahkan periksa homepage blog Anda dan pastikan widget popular posts telah berubah.

• Jika Anda belum pernah menggunakan widget popular posts bawaan blogger, pergi ke menuLayout/Tata Letak, klik Add a gadget dan ambil widgets popular posts blogger.

• Sekali lagi periksa halaman homepage blog Anda, dan pastikan widget popular posts yang baru saja ditambahkan sudah sesuai dengan keinginan Anda.

Alhamdulillah, sampai di sini perkerjaan Anda untuk menambahkan widget popular post multi colorsudah selesai, jika menemui hambatan atau kesulitan saat mempraktekkan tutorial ini, jangan sungkan meninggalkan komentar pada bagian bawah artikel ini, atau jika Anda punya saran dan pendapat lain, saya mengajak Anda untuk bertukar informasi untuk kemajuan kita bersama.