Mewarnai Background Entri Popular dengan Banyak Gaya Warna
Memang terasa bosan jika tampilan blog itu polos saja, tidak ada warna yang bisa menambah gairah pengunjung / pembaca berbetah singgah berlama-lama pada blog yang kita miliki. Maka, apa salahnya kita mencoba dengan tampilan yang lebih fresh dengan menambahkan warna background-nya.
Sebelumnya, pastikan anda sudah tahu cara menambah / memasang widget entri popular pada template blog anda masing- masing. Atau bagi yang belum tahu dapat melakukan dengan cara seperti berikut ini:
Memasang widget entri popular pada template
1. Silahkan masuk pada akun blogger anda.
2. Selanjutnya, Kunjungi menu Tata Letak . Lalu Tambah Gadget dan pilih Entri Popular.
3. Dan atur tampilan sesuai kebutuhan anda, Agar popular post tampil gambar, maka centang tumbnail gambar. Dan terakhir klik simpan.
4. SELESAI.
Nah Kemudian untuk memodifikasi entri popular post, kunjungi menu Template lalu klik edit HTML cari kata ]]></b:skin> di kolom template. Caranya: gunakan CTRL + F di kolom template anda.
Setelah itu tambahkan kode-kode CSS pada template anda dan letakan kode tersebut di atas kode ]]></b:skin> atau </style>]]> dan silahkan klik simpan.
Berikut ini kami sajikan 5 gaya Widget Entri Popular berwarna-warni terbaik yang di kutip dari berbagai sumber dan tentu saja di buat oleh desainer para ahlinya, khusus buat anda para pecinta blogger sejati. Nah berikut ulasannya singkatnya:
Entri Popular Gaya 1
Pada tampilan Entri Popular Gaya 1 di desain dengan gaya warna keren dan menarik, Memiliki tampilan ciri khas dengan design entri popular agak mengecil kebawah dari sebelah sisi kanan ke arah dalam.
Gaya entri popular ini adalah tampilan widget yang di pakai pada template premium-nya mas sugeng riyadi yang super SEO yaitu evomagz. Silahkan anda ambil widgetnya dulu kalau sudah ada rejeki baru kemudian beli deh template premium evomagz-nya. hehehe
Baca juga: Cara Menampilkan Widget Entri Populer pada Template (Tema) Buatan Mas Sugeng
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna hitam, bergambar di sebelah sisi kanan, dan di sertai nomor urut postingan artikel di sebelah kanan dan berbentuk semakin mengecil dari sisi kanan ke bawah.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang
tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat seperti: Judul artikel/front berwarna hitam di sertai nomor urut postingan artikel di sebelah kanan dan berbentuk semakin mengecil dari sisi kanan ke bawah.
Nah, anda tertarik dengan tampilan Entri Popular Gaya 1??? Silahkan di coba / copy paste kode CSSnya di bawah ini:
Kode CSS:
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna putih, bergambar di sebelah sisi kanan, bernomor urut postingan di sebelah kanan, dan berbentuk normal.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat seperti: Judul artikel/front berwarna putih dan di sertai dengan nomor urut postingan artikel di sebelah sisi kanan dan berbentuk normal.
Silahkan di copy paste code CSS berikut ini:
Kode CSS:
 |
| (Gambar kiri dan gambar kanan) |
Gaya entri popular ini adalah tampilan widget yang di pakai pada template premium-nya mas sugeng riyadi yang super SEO yaitu evomagz. Silahkan anda ambil widgetnya dulu kalau sudah ada rejeki baru kemudian beli deh template premium evomagz-nya. hehehe
Baca juga: Cara Menampilkan Widget Entri Populer pada Template (Tema) Buatan Mas Sugeng
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna hitam, bergambar di sebelah sisi kanan, dan di sertai nomor urut postingan artikel di sebelah kanan dan berbentuk semakin mengecil dari sisi kanan ke bawah.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang
tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat seperti: Judul artikel/front berwarna hitam di sertai nomor urut postingan artikel di sebelah kanan dan berbentuk semakin mengecil dari sisi kanan ke bawah.
Nah, anda tertarik dengan tampilan Entri Popular Gaya 1??? Silahkan di coba / copy paste kode CSSnya di bawah ini:
Kode CSS:
/* 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 img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
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;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}
.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 img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
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;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}
Entri Popular Gaya 2
 |
| (Gambar kiri dan gambar kanan) |
Untuk Entri Popular Gaya 2 juga tak kalah menarik dengan desain warna-warni kerennya. Dengan ciri khas design warna fresh dan tampilan lebih teratur. Tampilan seperti ini banyak di gunakan oleh blogger-blogger pada umumnya, dan mungkin karena terlihat sederhana.
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna putih, bergambar di sebelah sisi kanan, bernomor urut postingan di sebelah kanan, dan berbentuk normal.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat seperti: Judul artikel/front berwarna putih dan di sertai dengan nomor urut postingan artikel di sebelah sisi kanan dan berbentuk normal.
Silahkan di copy paste code CSS berikut ini:
/*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:
.PopularPosts ul li:nth-child(2){background-color:
.PopularPosts ul li:nth-child(3){background-color:
.PopularPosts ul li:nth-child(4){background-color:
.PopularPosts ul li:nth-child(5){background-color:
.PopularPosts ul li:nth-child(6){background-color:
.PopularPosts ul li:nth-child(7){background-color:
.PopularPosts ul li:nth-child(8){background-color:
.PopularPosts ul li:nth-child(9){background-color:
.PopularPosts ul li:nth-child(10){background-color
.PopularPosts .item-thumbnail{margin:0 7 0 0}
.PopularPosts .item-snippet{font-size:11px}
.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:
.PopularPosts ul li:nth-child(2){background-color:
.PopularPosts ul li:nth-child(3){background-color:
.PopularPosts ul li:nth-child(4){background-color:
.PopularPosts ul li:nth-child(5){background-color:
.PopularPosts ul li:nth-child(6){background-color:
.PopularPosts ul li:nth-child(7){background-color:
.PopularPosts ul li:nth-child(8){background-color:
.PopularPosts ul li:nth-child(9){background-color:
.PopularPosts ul li:nth-child(10){background-color
.PopularPosts .item-thumbnail{margin:0 7 0 0}
.PopularPosts .item-snippet{font-size:11px}
Entri Popular Gaya 3
 |
| (Gambar kiri dan gambar kanan) |
Berbeda dengan gaya entri populer gaya 1, tampilan Entri Popular Gaya 3 lebih terlihat semakin mengecilnya dari atas ke bawah. Perbedaannya juga terletak pada gambar yang berbentuk bulat dan nomor urut postingan di beri lingkaran. Walaupun begitu tampilannya tetap saja keren dan mantap.
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna hitam, nomor postingan di beri berbentuk bulat, dan berbentuk semakin mengecil dari ke sisi kanan atas ke bawah.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang
tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna berwarna hitam dan di sertai nomor urut postingan di beri bentuk bulat, dan juga terlihat berbentuk semakin mengecil dari sisi kanan atas ke bawah..
Nah, berikut kode CSSnya :
Kode CSS:
Kode CSS:
Catatan:
Nah, gaya entri popular yang mana paling menarik??? yups, Silahkan di coba yang mana anda suka.
.PopularPosts .item-thumbnail { float: left; margin: 0 10px 0 0; } .PopularPosts img { margin-right: 0.5em; transition: all 0.5s; } .PopularPosts .item-title { padding-bottom: 0.2em; } .PopularPosts .item-snippet { color: #fff; } .item-thumbnail img { border-radius: 100px; padding: 5px; width: 60px; height: 60px; background: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2); } .PopularPosts ul li { position: relative; margin: 5px 0; padding: 5px; border: 0; } .PopularPosts ul li:first-child { background: #ff4c54; width: 95%; } .PopularPosts ul li:first-child:after { content: "1"; } .PopularPosts ul li:first-child + li { background: #ff764c; width: 87%; } .PopularPosts ul li:first-child + li:after { content: "2"; } .PopularPosts ul li:first-child + li + li { background: #ffde4c; width: 84%; } .PopularPosts ul li:first-child + li + li:after { content: "3"; } .PopularPosts ul li:first-child + li + li + li { background: #c7f25f; width: 81%; } .PopularPosts ul li:first-child + li + li + li:after { content: "4"; } .PopularPosts ul li:first-child + li + li + li + li { background: #33c9f7; width: 78%; } .PopularPosts ul li:first-child + li + li + li + li:after { content: "5"; } .PopularPosts ul li:first-child + li + li + li + li +li { background: #7ee3c7; width: 75%; } .PopularPosts ul li:first-child + li + li + li + li + li:after { content: "6"; } .PopularPosts ul li:first-child + li + li + li + li + li +li { background: #f6993d; width: 72%; } .PopularPosts ul li:first-child + li + li + li + li + li + li:after { content: "7"; } .PopularPosts ul li:first-child + li + li + li + li + li + li +li { background: #f59095; width: 69%; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li:after { content: "8"; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li +li { background: #c7f25f; width: 66%; } .PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after { content: "9"; } .PopularPosts ul li:first-child:after, .PopularPosts ul li:first-child + li:after, .PopularPosts ul li:first-child + li + li:after, .PopularPosts ul li:first-child + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li + li:after, .PopularPosts ul li:first-child + li + li + li + li + li + li + li + li:after { position: absolute; top: 20px; right: -15px; border-radius: 50%; background: #353; width: 30px; height: 30px; line-height: 1em; text-align: center; font-size: 28px; color: #fff; }
Entri Popular Gaya 4
 |
| (Gambar kiri dan gambar kanan) |
Mengusung tampilan warna kegelap-kegelapan, entri popular gaya 4 memiliki tampilan sederhana dan bersahaja. Entri popular gaya 4 memiliki ciri khas menggunakan huruf besar/kapital.
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna hitam di sertai tulisan kapital/besar, bernomor entrindi beri lingkaran, dan bergambar di sisi kanan.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat front berhuruf kapital/besar serta tulisan berwarna hitam, dan bernomor entri di beri lingkaran.
Baca juga:
Kode CSS:
/* Popular Posts warna warni3 */
.popularposts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0;
padding}
.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.popular-posts a{color:#fff}
.popular-posts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-
reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-
left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount);
font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-
radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px;
display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-
bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}
.PopularPosts ul li{padding:3px 7px;border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}
.popularposts{ color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0;
padding}
.popular-posts{line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.popular-posts a{color:#fff}
.popular-posts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-
reset:popcount}
.popular-posts ul li:before{list-style-type:none;margin-top:10px;margin-right:15px;margin-
left:5px; padding:0.3em 0.8em; counter-increment:popcount; content:counter(popcount);
font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff;border-
radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px;
display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%;border-
bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
#PopularPosts1 .widget-content{padding:0px 0 0 17px; margin-bottom:-2px}
.PopularPosts ul li{padding:3px 7px;border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067;margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#d9ba71;margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1;margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397;margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5;margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71;margin-right:0}
Entri Popular Gaya 5
 |
| (Gambar kiri dan gambar kanan) |
Nah, berikut ini entri popular yang terakhir saya rekomendasikan untuk anda, Entri popular Gaya 5 di desain dengan tampilan yang lebih lebar dan tentunya di tambah ciri khas warna-warni yang keren. Entri popular yang ini cocok untuk di pasang di template blog yang memiliki tampilan gelap.
Keterangan gambar kiri: Konfigurasi entri popular dengan di centang tumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat menjadi huruf judul/front berwarna putih, bernomor urut postingan di sebelah kiri, dan bergambar di sisi kanan, dan berbentuk normal.
Keterangan gambar kanan: Konfigurasi entri popular dengan tidak di centang tnumbnail gambar dan tanpa cuplikan. Maka tampilannya terlihat huruf judul/front berwarna hitam dan bernomor urut postingan di sebelah kiri, dan berbentuk normal
Kode CSS:
/* Popular Post warna-warni2*/
.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}
Catatan:
Kode yang di beri warna merah di atas dapat di ubah sesuai kebutuhan atau selera warna anda.
Nah, gaya entri popular yang mana paling menarik??? yups, Silahkan di coba yang mana anda suka.
Itu lah tadi 5 kumpulan kode css warna-warni entri popular yang keren untuk mewarnai widget entri popular post. Dan sebenarnya masih banyak gaya entri popular yang keren yang lainnya di luar sana. Tapi, cobalah dulu yang saya rekomendasikan di atas, mungkin ada yang berkenan.
Ok, Demikian yang dapat saya bagikan tentang Mewarnai Entri Popular dengan Banyak Gaya Warna. Mudah-mudahan tulisan ini dapat membantu anda dan bermanfaat. terima kasih...
