Cara Membuat Populer Post Berwarna di Blog

Cara Membuat Populer Post Berwarna di Blog - Populer post tanpa warna akan terlihat tidak menarik bener gk? ...nah dalam tutorial kali ini saya akan share kepada kalian cara membuat populer post berwarna di blog.

Populer Post merupakan widget wajib untuk setiap blog. Widget Populer Post ini dipasang biar pengunjung tau apa sih yang banyak dibaca di blog ini misalnya. Oke jika tertarik langsung saja ke caranya cekebrooot....

Cara Membuat Populer Post Berwarna di Blog

Hanya menambahkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau ]]&gt;&lt;/b:skin&gt;

Catatan:
Jika sebelumnya sobat sudah memasang CSS dari tema asli atau tutorial lainnya, hapus terlebih dahulu lalu gantikan dengan kode dibawah ini.

/* Popular Post Berwarna */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a}

Jika sudah Klik Simpan tema sobat dan lihat hasilnya.

Seting Widget sama kaya gambar dibawah ini agar terlihat rapi.

Jika sudah klik Simpan.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Populer Post Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.