Entri Populer UI Theme

Apa itu entri Populer?

Entri populer (popular posts widget) adalah widget rating berdasarkan click terbanyak pengunjung. Melalui widget ini anda dapat mengetahui artikel paling banyak dikunjungi berdasarkan frekuensi minggu, bulan, dan tahun. Kali ini saya akan share cara pasang widget entri populer dengan menggunkan UI Theme yang menarik dan multi warna. Selain itu widget entri populer ini hanya menggunakan CSS3 sederhana alias tidak menggunakan javascripts kompleks yang dapat membuat loading blog berat. Widget ini lumayan mencolok dan saya yakin akan dapat menjadi perhatian tersendiri bagi pengunjung blog anda. Sekarang mari kita bahas cara pasang Entri Populer UI Theme. Ikuti langkah berikut.

Cara Pemasangan

• Log in ke blog anda. Jangan blog tetangga ya gan
• Click Template lalu Edit HTML
• Masukkan CSS berikut di atas kode ]]></b:skin>. Silahkan pilih salah satu tampilan di bawah ini.
• Kalau sudah selesai click Simpan Template dan lihat hasilnya.

Entri Populer Style 1

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:100%}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:100%}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:100%}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:100%}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:14px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Tampilan

Entri Populer Style 2

<!-- Popular posts multi colored UI theme start -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:100%}
#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:100%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:100%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:100%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:100%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:14px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{-moz-border-radius:130px; -webkit-border-radius:130px; border-radius:130px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; padding:4px; border:1px solid #fff !important}
#PopularPosts1 img:hover{border-radius:0 0 0 0; -moz-transform:scale(1.2) rotate(-711deg); -webkit-transform:scale(1.2) rotate(-711deg); -o-transform:scale(1.2) rotate(-711deg); -ms-transform:scale(1.2) rotate(-711deg); transform:scale(1.2) rotate(-711deg)}<!-- popular posts multicolored UI theme end -->

Tampilan

Keterangan:
Kalau mau menghjilangkan penomoran, hapus kode merah
Kalau mau membuat gambar tidak berputar, hapus kode biru

Pengaturan Widget Entri Populer

• Click Tata Letak (layout)
• Click Tambah Gadget
• Pilih Entri Populer (Popular Posts)
• Lihat dan setting seperti gambar di bawah ini.

Demikian tutorial memasang widget Entri Populer UI Themedan semoga bermanfaat bagi kita semua, amin. Selamat mencoba dan semoga berhasil. Salam sahabat blogger.

Share this post