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 ) 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 :

/*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";
}

/*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;
}