Cara Membuat Popular Post Keren di Blog
Cara Membuat Popular Post Keren di Blog | Sebetulnya sangat mudah membuat widget popular post keren warna-warni, popular post yang saya share kali ini akan membuat blog kalian menjadi menarik dan disukai pengunjung sehingga pengunjung betah dengan tampilan yang keren dan enak dilihat.
Popular post berguna untuk menampilkan post yang paling banyak dilihat para pengunjung di blog kalian, apabila popular post keren dan enak dilihat pengunjung jadi betah nongkrong di blog. Widget popular post adalah widget wajib yang harus ada di setiap blog yang berguna untuk memudahkan pengunjung.
Widget popular post yang saya bagikan ini disertai nomor dan warna yang menarik minat pengunjung untuk meng-klik postingan di blog kalian.
Cara Membuat Popular Post Keren
Untuk demo widget popular post keren warna - warni bisa kalian lihat gambar diatas, sungguh keren bukan widget popular post yang saya bagikan kali ini ? bila kalian ingin punya widget popular post keren seperti diatas bisa ikuti cara dibawah :
1. Buka akun blogger kalian dan langsung saja menuju Blog Kalian
2. Buka Template > Edit HTML > Ganti Kode Popular post lama kalian dengan kode dibawah ini.
/* Popular Post keren www.onseoblog.blogspot.com*/
.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}
Untuk tampilan yang lebih menarik silahkan edit widget popular post, centang pada bagian thumbnail gambar dan hilangkan centang pada cuplikan
Sekian tutorial mengenai Cara Membuat Popular Post Keren Berwarna, bila kalian mengalami kesulitan bisa berkomentar di bawah.
