Membuat 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 bermanfaat 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.
Cara Membuat Popular Post Keren Warna Warni di Blog
Pertama : Kamu Harus mengganti CSS popular post Lama Kamu dengan Kode CSS ini.
Setelah itu Simpan template.
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 bermanfaat 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.
Cara Membuat Popular Post Keren Warna Warni di Blog
Demo Widget ini bisa Kamu lihat di Blog ini,
Untuk bisa memasang Widget ini di blog kamu, kita harus mengutak atik kode Template, sebelum itu saya sarankan untuk membackup templatenya, jika ada kesalahan tinggal di masukkan lagi.Pertama : Kamu Harus mengganti CSS popular post Lama Kamu dengan Kode CSS ini.
.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 Settingannya, tinggal masuk Tata Letak > Pilih Widget Popular Post, Mau pake thumbnail dll bisa di atur di sini.
Setelah semuanya Beres bisa kamu liat sendiri di blog kamu.
0 Komentar di Postingan "Membuat Popular Post Keren Warna Warni di Blog"
Posting Komentar