Làm list category đẹp cho blog trong wordpress

Khi làm blog hoặc trang thủ thuật thì các danh mục ( category )  đó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é

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   plugin Font Awesome 5 bản miễn phí

/*Category Sidebar*/
.widget_categories ul {
    margin-top:15px;
}
.widget_categories ul li {
    width: 46%;
    margin: 5px;
    float: left;
        background-color: #1ab4ef;
    color: #ffffff;
}
li.cat-item.cat-item a {
    color: #ffffff;
}
.widget_categories ul li:hover {
    background-color: red;
}
.cat-item:before {
    font-family: 'FontAwesome' !important;
    margin: 0 10px;
    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 )

.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;
}

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 !

[blockid="baivietlienquan"]

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *