Cara Membuat Widget Populer post Efek Warna Warni di Blog – Widget Populer post adalah sebuah widget yang menampilkan postingan terbaik atau terbanyak di lihat oleh pengunjung dari keseluruhan artikel di blog sobat. Populer post sanagtlah penting untuk di pasang, hal ini di karena kan sangat menarik pengunjung untuk membaca artikel terbaik di blog sobat. saya sendiri sudah memasangnya di blog saya dengan judul Populer post. Fungsi dari widget ini adalah untuk menampilkan artikel terbaik, yang pastinya menurut saya adalah widget yang harus di pasang id blog sobat.
Maka dari itu kali ini saya akan memberi tahu cara membuatnya. Hal yang berbeda dari Populer post pada umumnya, kali ini saya akan membuat Populer post menjadi memiliki efek warna warni yang dapat menambah daya tarik pengunjung untuk membacanya. Bagi sobat yang tertarik untuk memasangnya atau tertarik untuk mempelajari nya silahkan simak cara membuatnya berikut ini.
1. buka Blog Sobat > masuk menu “ Tata Letak” > Tambah Widget baru > pilih “Entri Populer”.
NB : bagi sobat yang sudah memiliki widget Populer post silahkan lewati cara nomer 1 di atas ini.
2. ganti kode CSS Populer post di Template (bagi sobat yang memiliki efek Populer post yang sudah terpasang di template blog) atau tambahkan kode CSS berikut ini (bagi sobat yang belum memiliki kode efek CSS di template blog).
/* Popular Post keren 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}
3. Terakhir simpan Template dan Lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Widget Populer post akan memiliki efek warna warni yang sangat keren.
Baca juga : Cara Pasang Alexa Extension Di Browser Chrome dan Mozilla Firefox
Baca juga : Cara Pasang Alexa Extension Di Browser Chrome dan Mozilla Firefox
Demikianlah tutorial mengenai Cara Membuat Widget Populer post Efek Warna Warni di Blog, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.
0 Komentar