Cara Membuat Popular Posts Warna Warni

Sesuai dengan judul saja, disini saya akan berbagi "Bagaimana Caranya Membuat Popular Post Warna Warni"
Membuatnya tidaklah sulit kok, cukup mudah.
Contohnya popular post warna warni seperti gambar berikut.

​

Lalu bagaimana caranya
1. Masuk Template
2. Pilih "Edit HTML"
3. Cari CSS Popular Post ( Pakai CTRL+F )
4. Ganti CSS Popular Post sebelumnya dengan yang dibawah ini

HTML:

/* Popular Post keren warna-warni */
.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}

5. Simpan deh, setelah itu lihat hasilnya

 

Keren dan kreatif, BTW Fans berat Wirda Mansur yak Bro ?

 

kayak templatenya mas sugeng

 

blogspot saya sudah jarang keurus

 

Hahaah nggak kok, cuma berbagi tentang-tentang dia aja, biar dia bisa menginspirasi banyak orang

Iyaa saya cuma mengambil dari CSS templatenya dia kok

Pasti malas mengurus ya bro ?

 

wordpress or bcepot?

 

Blogspot kok bang, kalau Wordpress gatau bisa dipakai apa ga, tapi ini saya membagikan untuk blogspot

 

Iya mas, warna warni kek templatenya mas sugeng, aku juga pake

 

bookmark...tanks infonya

 

wah mantap gan boleh di cobat itu,,,

 

Yang punya TS fans sama wirda Mansur. Mantap...
Pantes, semua postingan populernya mengenai wirda mansur

 

Wirda Mansyur sapa sih?
Anaknya Masyur S?
Caem banget emang sih hehehe

 

Wkwkwk dah dibilangin saya bukan fans nya

 

nambah pengetahuan laginih hari ini cocok nanti bakal ane coba

 

Pakai widget bisa juga tidak sih untuk bikin popular post warna warni macam gini? hahaaha

 

Ini kan memang widget ._.

 

Boleh dicoba nih gan supaya lebih berwana blog nya

 

Sip jangan lupa tunjukkan hasilnyaa

 

Siapp gann... nanti ane cobain

 

ane udah nyoba dan berhasil sob ini mantep banget rasanya