Cara Membuat Populer Post Berwarna Warni

Cara Membuat Populer Post Berwarna -Populer post atau yang biasa di kenal dengan Entri Populer ini memang sangat terlihat bagus apabila di tambahkan warna seperti gambar di atas , namun banyak blogger pemula yang belum mengetahui cara membuat populer post berwarna , adapun jika anda ingin memasang populer post berwarna ikuti langkah langkah berikut

Masuk ke blogger
Klik Tata Letak > Add Gadget
Kemudian Pilih Entri Populer

-----Keterangan -----

Jika anda ingin populer post anda ada gambar dan cuplikan postingannya , anda langsung klik Simpan .Namun jika anda ingin populer postnya tidak ada gambar dan postingannya , anda hilangkan tanda centang/ceklis pada kolom 'thumbnail gambar' dan 'cuplikan' , kemudian klik Simpan

Masuk ke Template > Edit HTML

Tambahkan CSS dibawah , pada template anda . Simpan Di atas ]]></b:skin>

/*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}