Cara Membuat Popular Post Berwarna Ala Kang Mousir

Cara Membuat Popular Post Berwarna Ala Kang Mousir - Assalamualikum Kawan semua, kembali lagi dengan saya di Andrie Brader, pada kesempatan kali ini saya akan membagikan tutorial mengenai memodifikasi popular post pada blogger, seperti yang kita tahu popular post default pada blog simple dan clean, namun ada juga pengunjung yang kurang suka dengan popular post default blog, oleh karena itu kita harus memodifikasinya agar terlihat enak dipandang. Popular post yang akan saya bagikan kali ini memiliki warna yang berbeda pada setiap bagiannya karen Popular ini menggunakan CSS Pseudo Element dan nth-child sehingga tampilannya terlihat elegan. Popular post ini juga popular post yang digunakan oleh Kang Mousir di blognya.

Cara Memasang Popular Post Default Pada Blogger

Sebelum kita memodifikasi template, kita harus mengaktifkan widget popular postnya, caranya :

Langkah #1 : Login pada Blogger dan masuk ke Dasbor Blogger.

Langkah #2 : Masuklah Ke Menu Tata Letak.

Langkah #3 : Pilihlah Lokasi untuk ditempati widget popular post >> Tambahkan Gadget.

Langkah #4 : Pilih Entri Popular >> Editlah Bentuknya >> Simpan.

Baca Juga :

Cara Membuat Navigasi Nomor Halaman Responsive Untuk 10.000 Postingan

Cara Memodifikasi Popular Post Pada Blogger

Setelah kita memasang kita bisa memodifikasinya, caranya :

Langkah #1 : Login pada Blogger dan masuk ke Dasbor Blogger.

Langkah #2 : Masuklah ke Menu Template >> Edit HTML.

Langkah #3 : Cari kode ]]></b:skin dan tempel kode dibawah ini tepat diatasnya.

/*Custom Popular Post By Andrie Brader And Kang Mousir*/
.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 By Andrie Brader And Kang Mousir*/
.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}

Ganti Kode warna sesuai selera kalian

Langkah #4 : Simpan Template. Dan Lihat hasilnya.

Demikian Artikel mengenai Cara Membuat Popular Post Berwarna Ala Kang Mousir. Semoga Bermanfaat. Sekian. Salam Blogger.