Cara Menciptakan Terkenal Post Berwarna Di Blog
Cara Membuat Populer Post Berwarna di Blog - Populer post tanpa warna akan terlihat tidak menarik bener gk? ...nah dalam tutorial kali ini aku akan share kepada kalian cara menciptakan terkenal post berwarna di blog.
Populer Post merupakan widget wajib untuk setiap blog. Widget Populer Post ini dipasang biar pengunjung tau apa sih yang banyak dibaca di blog ini misalnya. Oke jikalau tertarik pribadi saja ke caranya cekebrooot....
Cara Membuat Populer Post Berwarna di Blog
Hanya menambahkan arahan CSS dibawah ini sempurna diatas arahan ]]></b:skin> atau ]]></b:skin>
Catatan:
Jika sebelumnya teman sudah memasang CSS dari tema orisinil atau tutorial lainnya, hapus terlebih dahulu kemudian gantikan dengan arahan dibawah ini.
Jika sebelumnya teman sudah memasang CSS dari tema orisinil atau tutorial lainnya, hapus terlebih dahulu kemudian gantikan dengan arahan dibawah ini.
/* Popular Post Berwarna */ .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}Jika sudah Klik Simpan tema teman dan lihat hasilnya.
Seting Widget sama kaya gambar dibawah ini semoga terlihat rapi.
Jika sudah klik Simpan.
Oke sekian yang dapat aku jelaskan tentang Cara Membuat Populer Post Berwarna di Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.