Popular posts adalah salah satu widget blogger yang paling sering atau banyak dipasang di blog, widget ini berfungsi untuk menampilkan beberapa artikel terbaik atau popular di dalam sebuah blog.
Dengan widget ini sobat dapat menunjukkan kepada pengunjung beberapa rekomendasi artikel terbaik atau paling sering di kunjungi dalam blog, dan juga hal ini tentu akan menambah page view blog.
Biasanya widget popular posts di pasang pada sidebar blog, cara memasangnya pun cukup mudah, karena widget ini adalah salah satu widget default dari Blogger.
Namun, untuk widget popular posts yang di sediakan secara default ini masih memiliki tampilan yang sangat sederhana. Nah, kali ini saya akan berbagi cara untuk membuat widget popular posts menjadi warna warni.
Bagi yang penasaran dan ingin mencobanya, silahkan lakukan langkah-langkah yang saya berikan berikut ini.
Cara Membuat Widget Popular Posts Warna Warni di Blog
Buka Blogger sobat, selanjutnya buka menu TEMA , setelah itu klik Edit HTML, silahkan letakkan kode ini sebelum kode ]]></b:skin> atau </style>
Sebelum melakukan langkah di bawah sobat hapus terlebih dahulu semua kode CSS popular posts yang sudah ada.
/* Popular Post Warna Warni */
.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;}Selanjutnya klik Simpan Tema dan lihat hasilnya.
Untuk sobat yang belum memasang widget popular post, berikut cara pasangnya. Pertama, buka menu Tata Letak, lalu klik Tambahkan Gadget, setelah itu cari widget popular posts lalu klik tombol + atau tambahkan widget.
Sekian tutorial Cara Membuat Widget Popular Posts Warna Warni di Blog, semoga bermanfaat dan semoga berhasil. Terima Kasih...
