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 sama pentingnya dengan widget artikel terkait yang memberikan peran besar dalam masalah page view. Ngomong-ngomon 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 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, Tambahkan Widget kemudian pilih Entri Populer, lalu atur sesuai gambar dibawah ini.

Langkah selanjutnya, 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 letakan kode CSS dibawah tepat diatasnya.
/* -- 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.


Judul : Cara Membuat Popular Post Dengan Menggunakan Nomor Urut
URL : http://www.tobadak.com/2014/01/cara-membuat-popular-post-dengan-menggunakan-nomor-urut.html
Penulis : Arman Tobadak
Back to Top