menu

Cara Membuat Popular Post Dengan Menggunakan Nomor Urut


Assalamualaikum Wr. Wb.
Widget popular post merupakan widget yang menampilkan daftar artikel yang paling sering dibaca oleh pengunjung dalam kurun waktu tertentu, keberadaan widget artikel popular ini pada blog dapat  membantu menigkatkan jumlah page view. Bagi saya pribadi memasang widget ini merupakan hal yang wajib karena sangat meberikan pengaruh pada peningkatan jumlah page view atau tampilan halaman, sama pentingnya dengan widget artikel terkait yang memberikan peran besar dalam masalah page view. Ngomong-ngomong soal page view anda bisa baca artikel saya sebelumnya mengenai Tips-tips Meningkatkan Page view 5 kali Lipat Dari Jumlah Visitor.

Ok,,, kembali ke topik...
Saya rasa cara untuk menambahkan widget popular post agan-agan semuanya sudah tahu dan tidak perlu ane jelasin lebih panjang. Sesuai dengan judul artikel ini admin akan share CSS untuk mengubah tampilan widget popular post agar tampak lebih menarik. CSS popular post ini saya dapat dari koding saya terhadap template blog o-om. untuk lebih jelasnya mengenai tampilan widget ini anda bisa melihat gambar di bawah atau melihat langsung pada sidebar blog ini.



Langkah pertama untuk membuat popular post seperti pada gambar diatas silahkan menuju halaman Tata Letak pada template anda, pilih Tambahkan Widget kemudian pilih Entri Populer, lalu atur sesuai gambar dibawah ini dan simpan.


Langkah selanjutnya langsung menuju kehalaman edit HTML template, jika sebelumnya agan telah memasang CSS untuk popular post hapus terlebih dahulu kode CSS tersebut pada halaman edit HTML, gunakan kode ini .PopularPosts untuk mencari CSS tersebut. kalau tidak, langsung saja cari kode tag ini ]]></b:skin> kemudian copy semua kode CSS dibawah dan letakkan semua CSS tersebut  tepat diatas kode tag </b:skin> dan terakhir klik simpan.

/* -- POPULAR POST -- */
.PopularPosts .widget-content ul{margin:0;padding:7px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;}
.PopularPosts .widget-content ul li:first-child {background:#444;width:93%}
.PopularPosts .widget-content ul li:first-child:after{content:"01";}
.PopularPosts .widget-content ul li:first-child + li{background:#555;width:90%}
.PopularPosts .widget-content ul li:first-child + li:after{content:"02";}
.PopularPosts .widget-content ul li:first-child + li + li{background:#666;width:85%}
.PopularPosts .widget-content ul li:first-child + li + li:after{content:"03";}
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#777;width:80%;}
.PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"04";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#888;width:75%;}
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"05";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#999;width:70%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li:after{content:"06";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#aaa;width:65%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li +li:after{content:"07";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#bbb;width:60%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after{content:"08";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#c1c1c1;width:55%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#ccc;width:50%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";}
.PopularPosts .widget-content ul li:first-child:after,
.PopularPosts .widget-content ul li:first-child + li:after,
.PopularPosts .widget-content ul li:first-child + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li +li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li:after,
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li + li + li +li +li:after
{position:absolute;top:1px;right:1px;background:#333;width:20px;line-height:1em;text-align:center;color:#fff; font-size:12px !important; font-weight:bold}
.PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;padding:0;width:30px;height:90px}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
Dan langkah terakhir silahkan Anda lihat hasilnya.
 
Back to Top