Post populer adalah salah satu bagian penting di blog, yang berfungsi untuk menampilkan beberapa postingan yang sering di kunjungi oleh pengunjung blog.
Agar supaya pengunjung bisa tau postingan yang mana yang sedang hot/populer pada blog tersebut .seperti gambar di bawah ini.
Dengan cara ini pengunjung blog akan menjadi tertarik membaca postingan yang sedang populer pada blog tersebut,
Supaya pengunjung blog lebih tertarik lagi sobat bisa menghias Post Populer dan menjadi berwarna.
Pada kesempatan ini, saya akan menjelaskan Cara Membuat Post Populer Di Blog Menjadi Warna Warni, dan bahkan menjadi fullColor.
Bagaimana caranya?, yuk tidak perlu berlama lama, ikuti langkah langkah berikut di bawah ini :
- Pertama, silakan masuk di dashboard blog masing masing
- Kedua, pilih menu tata letak lalu pilih post populer dan klik edit seperti gambar di bawah ini
- Selanjutnya silakan edit terlebih dahulu menu post populer berapa entri yang akan sobat tampilkan dan yang paling banyak di kunjungi dalam setahun ,30 hari, atau 7 hari terakhir, terserah sobat semuanya. Jika sudah selesai lalu klik simpan, lihat gambar di bawah ini
- Jika semua nya sudah selesai maka silakan sobat pilih menu tema dan klik edit HTML
- Lalu cari kode ]]></b:skin> atau kode </style>
- Masukan kode CSS dibawah ini tepat di atas kode yang tadi
.PopularPosts ul,
.PopularPosts li,
Noted :
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 0 0 0 !important;
padding:10px 20px 10px 10px !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts .widget-content ul li {
list-style-type: none;
}
.PopularPosts ul li:nth-child(1) {background-color:#00FFFF;
}
.PopularPosts ul li:nth-child(2) {background-color:#00BFFF;
}
.PopularPosts ul li:nth-child(3) {background-color:#8B0000;
}
.PopularPosts ul li:nth-child(4) {background-color:#EF4836;
}
.PopularPosts ul li:nth-child(5) {background-color:#B8860B;
}
.PopularPosts ul li:nth-child(6) {background-color:#0000FF;
}
.PopularPosts ul li:nth-child(7) {background-color:#A52A2A;
}
.PopularPosts ul li:nth-child(8) {background-color:#5F9EAD;
}
.PopularPosts ul li:nth-child(9) {background-color:#7FFF00;
}
.PopularPosts ul li:nth-child(10) {background-color:#64950;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
Text yang berwarna merah adalah kode warna post populer nya, jika sobat kurang menyukai silakan ganti sesuai keinginan dan selera masing masing.
Baca Juga :
Adapun kode warna pilihan lain nya silakan sobat lihat DISINI
- Jika sudah selesai silakan simpan dan cek hasilnya
Semoga artikel ini bermanfaat silakan tinggalkan pesan di kolom komentar jika masih ada yang belum bisa di fahami.
0 Komentar
Ditulis Oleh :