Cara Membuat Popular Post Lebih Bewarna Pada Blog

Cara Membuat Popular Post Lebih Bewarna Pada Blog - Kali ini saya akan berbagi tentang artikel terbaru tips dan trik panduan blog pada widget popular post agar lebih tampil keren dengan menampilkan warna warni dengan hanya sedikit memodifikasi pada CSS nya.

Sebenarnya Popular post bergaya warna warni ini terinspirasi pada blognya mas sugeng yaitu evomagz anda bisa membuatnya pada artikel saya sebelumnya yaitu Cara Membuat Entri Post Evomagz silahkan anda baca.

Cara Membuat Popular Post Lebih Bewarna Pada Blog

Nah, bagi sahabat yang ingin memodifikasi entri popularnya menjadi warna warni agar lebih menarik dilihat anda bisa menggunakan trik ini, Mudah banget lho cara membuatnya simpel dan cepat bahakan anda hanya perlu copy pastekan saja css nya.

Sebelumnya tahukah anda apa itu popular post/artikel popular? pengertiannya yaitu sebuah artikel yang pada blog yang paling banyak dibaca oleh pengunjung, Nah jika anda hanya menggunakan tampilan default saja maka tampilannya polos tanpa ada sentuhan css. Mari kitasimak bagaimana cara memodifikasinya?

Berikut Cara Memodifikasi Entri Popular Keren :

  • Silahkan anda masuk ke blogger.com
  • Kemudian silahkan anda Tambahkan Gadget dan cari Entri Popular
  • Langkah selanjutnya anda hanya mensetting pada bagian seperti pada gambar berikut ini :
Memodifikasi Popular Post Lebih Bewarna Pada Blog
  • Kemudian anda copy code CSS dibawah ini dan pastekan tepat diatas kode  ]]></b:skin> atau </style>
.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:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#444 !important;text-decoration:none;}
.PopularPosts ul li:before {content:counter(num) !important;display:block;position:absolute;background-color:#333;color:#fff !important;width:22px;height:22px;line-height:22px;text-align:center;top:0px;right:0px;padding-right:0px !important;}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(3) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts ul li:nth-child(6) {background-color:#E1F3FD;margin-right:1% !important}
.PopularPosts ul li:nth-child(7) {background-color:#EDE3F2;margin-right:1% !important}
.PopularPosts ul li:nth-child(8) {background-color:#EFF8DD;margin-right:1% !important}
.PopularPosts ul li:nth-child(9) {background-color:#FEF6E1;margin-right:1% !important}
.PopularPosts ul li:nth-child(10) {background-color:#FEE4E3;margin-right:1% !important}
.PopularPosts .item-thumbnail {margin:0 0 0 0;}
.PopularPosts .item-snippet {font-size:11px;}
.profile-img{display:inline;opaciry:10;margin:0 6px 3px 0;} 
  • Save dan silahkan anda lihat hasilnya! 

Popular Post Warna Warni Terbaru untuk Blog : 

Sebenernya ada banyak sekali modifikasi Entri Populat blog anda juga bisa juga bisa menggunakan Widget Popular Post warna Warni yang lainnya seperti pada gambar berikut ini:

Widget Popular POST KEREN dengan Mudah

Untuk kode scriptnya berikut ini :

/*Custom Popular Post*/
.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{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#f1c40f;}
.PopularPosts ul li:nth-child(2){background-color:#f39c12;}
.PopularPosts ul li:nth-child(3){background-color:#2ecc71;}
.PopularPosts ul li:nth-child(4){background-color:#27ae60;}
.PopularPosts ul li:nth-child(5){background-color:#e67e22;}
.PopularPosts ul li:nth-child(6){background-color:#d35400;}
.PopularPosts ul li:nth-child(7){background-color:#3498db;}
.PopularPosts ul li:nth-child(8){background-color:#2980b9;}
.PopularPosts ul li:nth-child(9){background-color:#ea6153;}
.PopularPosts ul li:nth-child(10){background-color:#c0392b;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
Mudah bukan tipsnya, sekian artikel kali ini semoga dapat bermanfaat dan membantu anda dalam memodifikasi entri popular menjadi jauh lebih keren dan tampil beda dengan yang lainnya. CSS diatas merupakan ide dari template evomagz yang dibuat oleh mas-sugeng jika ada kekurangan silahkan berkomentar secara bijak!

22 Responses to "Cara Membuat Popular Post Lebih Bewarna Pada Blog"

  1. terima kasih atas informasinya mas,,kapan-kapan boleh di coba ini :)

    BalasHapus
  2. Jadi lenih menarik nih mas kalo artikel populeer lebih bewarna... maksih triknya

    BalasHapus
  3. Sangat membantu sekali mas... saya cari kemana2 g nemu disini malahdapet lebih bagus

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. Iya mas lebih menarik dan terlihat keren blog kita silahkan pasang di blog kalian hehe

    BalasHapus
  6. punya saya sudah terpasang entri popular warna namun beda dengan ini. Coba dulu mas

    BalasHapus
  7. wah boleh dicoba nih,, biar lebih keren popular postnya.

    BalasHapus
  8. Silahkan dicobaim mba... gratis nggak bayar :p

    BalasHapus
  9. super sekali mas,, bagus buat dekor blog

    BalasHapus
  10. Yang penting g berlebihan mas....

    BalasHapus
  11. Mudah jg ya gan kalau mau bkin tmpilan blog jdi menarik, dg merubah warna populer post sja blog jd lebih indah. Salam kenal semuanya.

    BalasHapus
  12. Iya mas...kita hanya perlu edit pada bagian css nya saja

    BalasHapus
  13. Silahkan diterapkan pada blog anda mas :D

    BalasHapus
  14. sangat membantu saya. terimakasih

    BalasHapus

Jangan cuma dibaca aja, tinggalin komentar juga ya...