Cara Membuat Widget Popular Post Keren Warna Warni di Blog

Membuat Popular Post Keren Warna Warni di Blog - Tutor ini sebenarnya sudah banyak yang share namun di beberapa blog yang saya temui tampilan Populer Postnya sangat sederhana, karena saya tipe orang yang suka berimajinasi, maka terciptalah ide untuk mencari tampilan popular post yang menarik, keren dan tentu saja Warna-warni.

Sebelum itu saya akan memberikan Defenisi mengenai Apa itu Widget popular post..

Popular post merupakan salah satu widget yang pada fungsinya wajib untuk di pasang di blog. Dimana Widget ini berfungsi untuk memberitahukan pengunjung postingan apa saja yang paling dicari dan paling banyak di baca oleh pengunjung blog baik langsung dari mesin pencari, hasil blogwalking dan lain sebagainya.

Untuk penggunaannya sendiri biasanya di letakkan diwidget Blog, yang dimana banyak orang bisa melihatnya.

Cara Membuat Popular Post Keren Warna Warni di Blog

Untuk bisa memasang Widget ini di blog kamu, kita harus mengutak atik kode Template, sebelum itu saya sarankan untuk membackup templatenya, jika ada kesalahan sobat bisa memperbaikinya kembali dengan mudah,
 
Pertama : Kamu Harus mengganti CSS popular post Lama Kamu dengan Kode CSS ini. 

Jika Sobat Pengguna Template Arlina Soba bisa cari CSS Widget dengan mudah hanya mengetik "Popular Post" di pencarian (CTRL+F) lalu soba masukkan "Popular Post"

.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}

Setelah itu Simpan template.

Sangat Mudah Bukan, Kita cuma menghapus CSS Populer Post yang lama.

Untuk Demonya Bisa sobat liat di Gambar Cover tulisan ini.

Untuk Settingannya, tinggal masuk Tata Letak > Pilih Widget Popular Post, Mau pake thumbnail , berapa list yang akan ditampilkan, semua bisa di atur sendiri,

Setelah semuanya Beres bisa kamu liat sendiri di blog kamu.

Kesimpulan  

Widget Popular Post ini tidaklah berat karena hanya mengubah CSS dari Widget Popular Post itu sendiri, sobat bisa mengganti warnanya jika sobat mahir dalam menggunakan CSS.
Semoga Bermanfaat.

Share artikel ke sosmed

Facebook Twitter Google+ Whatsapp