Cara Menciptakan Widget Popular Posts Warna Warni Di Blog
Popular posts ialah 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 sahabat sanggup menawarkan 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, sebab widget ini ialah salah satu widget default dari Blogger.
Namun, untuk widget popular posts yang di sediakan secara default ini masih mempunyai tampilan yang sangat sederhana. Nah, kali ini saya akan membuatkan cara untuk menciptakan widget popular posts menjadi warna warni.
Bagi yang ingin tau 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 sajian TEMA , sesudah itu klik Edit HTML, silahkan letakkan arahan ini sebelum arahan ]]></b:skin> atau </style>
Sebelum melaksanakan langkah di bawah sahabat hapus terlebih dahulu semua arahan 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 sahabat yang belum memasang widget popular post, berikut cara pasangnya. Pertama, buka sajian Tata Letak, kemudian klik Tambahkan Gadget, sesudah itu cari widget popular posts kemudian klik tombol + atau tambahkan widget.
Sekian tutorial Cara Membuat Widget Popular Posts Warna Warni di Blog, biar bermanfaat dan biar berhasil. Terima Kasih... Sumber https://www.denylistianto.com/