Cara Membuat Widget Popular Post Berwarna-Warni di Blog -- Salah satu tanda kepopuleran sebuah situs ditandai dengan banyaknya pengunjung dan banyaknya artikel yang sering dikunjungi oleh mereka. Dengan adanya pengunjung akan memberikan sebuah apresiasi terhadap artikel yang sudah di buat oleh seorang blogger. Untuk mengetahui manakah artikel yang sering di baca oleh pengunjung biasanya seorang pengelola situs memberikan sebuah widget penting di situs mereka. Widget yang dimaksud adalah widget popular post. Widget ini berfungsi untuk memberikan grade atau ranking terhadap sebuah kepopuleran artikel di dalam sebuah situs. Manakah yang paling sering dibaca dan manakah yang tidak. Widget popular post adalah penanda sebuah artikel dari yang paling sering dibaca hingga yang jarang dibaca. Jumlahnya tergantung pengelola situs ingin berapa menampilkan di situs masing-masing.
Pertanyaannya adalah apakah ada manfaatnya ketika pemilik situs memasang sebuah widget popular post? Jawabannya tentunya ada. Apalagi kalau widget tersebut diberi efek warna. Secara normal warna akan memberikan efek nyaman bagi yang melihatnya. Sehingga dengan widget popular post yang warna-warni secara tidak langsung pengunjung akan mau berlama-lama di situs yang mereka baca. Terlebih lagi kalau pengunjung mau membaca dari artikel yang paling sering dibaca hingga yang jarang dibaca. Jumlah lalu lintas tentunya akan makin meningkat juga.
Bagaimana cara membuat widget popular post berwarna-warni di blog? Yuk mari bersama admin belajar tutorial cara membuatnya.
Cara Memasang Widget Popular Post Berwarna-Warni
Untuk memberikan efek warna pada widget popular post gunakanlah CSS Pseudo Element dan nth-child. Dengan CSS tersebut, widget popular post akan semakin enak dipandang mata. Langkah memasangnya sebagai berikut.
1. Log in dulu ke akun Blogger sobat masing-masing
2. Arahkan ke tab Lay Out / Tata Letak
3. Klik tambahkan Gadget kemudian disambung dengan pilih Entri Popular.
4. Aturlah widget tersebut sesuai dengan gambar berikut ini.
5. Sisipkan kode CSS berikut di Template milik sobat masing-masing. Letakkan di atas kode ]]></b:skin> atau </style>. Jangan lupa untuk Menyimpannya jika sudah berhasil.
/*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}[Baca Juga : Cara Memasang Tombol Slide Demo dan Download]
Begitulah Cara Membuat Widget Popular Post Berwarna di Blog. Jika sobat hendak mengubah warnanya. Silahkan dirubah bagian CSS Pengaturan Warnanya. Semoga bermanfaat.