Khi làm blog hoặc trang thủ thuật thì các danh mục ( category ) rất quan trọng , nó đóng vai trò là chuyên mục chính của mỗi web , Để làm đẹp nó ở sidebar hôm nay mình sẽ chỉ bạn cách làm nhé
Làm list category đẹp cho blog trong wordpress
Trong wordpress mỗi Chuyên mục tại ra có một Class có tên Cat-item
Name class này được sắp xêp theo dạng class – Số ID của chuyên mục
Chú ý : cần yêu cầu cài Font Awesome 5 bản miễn phí
OK , bắt tay vào vấn đề ( như hình chia 2 cho list danh mục ) ta có css sau :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/*Category Sidebar*/
.widget_categories ul{
margin–top:15px;
}
.widget_categories ulli{
width:46%;
margin:5px;
float:left;
background–color:#1ab4ef;
color:#ffffff;
}
li.cat–item.cat–itema{
color:#ffffff;
}
.widget_categories ul li:hover{
background–color:red;
}
.cat–item:before{
font–family:‘FontAwesome’!important;
margin:010px;
content:“f022”;
}
|
Như list trên ta tạo được 1 list chia làm 2 , có hiệu ứng Hover chuột cho mỗi chuyên mục
Để làm 2 chuyên mục như Hình Ảnh và Videos ta có Css riêng của mỗi chuyên mục ( 2 class tương ứng với 2 chuyên mục cần css )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.cat–item–7:before{
font–family:‘FontAwesome’!important;
content:“f87c”;
}
.cat–item–3:before{
font–family:‘FontAwesome’!important;
content:“f03d”;
}
li.cat–item.cat–item–7,li.cat–item.cat–item–3{
background–color:#ec5e95;
color:#ffffff;
margin:4px;
}
|
cần tham khảo vui lòng xem demo bên SIdebar nhé
Nếu bạn có yêu cầu hoặc thắc mắc gì vui lòng commem bên dưới để được giúp đỡ nhé
Chúc bạn thành công !
