Thông thường trên mỗi trang của Blogger có sử nhiều cặp thẻ li để liệt kê một danh sách nào đó. Giao diện hiển thị mặc định của loại thẻ này trên Blogger thường không được đẹp mắt. Trong bài viết này tôi sẽ chia sẻ với các bạn cách tùy chỉnh giao diện hiển thị của thẻ này. Chắc chắn các bạn sẽ cảm thấy đẹp mắt và ưng ý hơn giao diện mặc định.
Giới thiệu CSS của thẻ li
Giao diên hiển thị mặc định của thẻ li thông thường như hình:
Mỗi thẻ li sẽ được hiển thị theo CSS mặc định hoặc được định nghĩa bởi người tạo. Mỗi thẻ li sẽ có các CSS như:
- Class li:before - định nghĩa các thành phần phía trước của thẻ li
- Class li:after - định nghĩa các thành phần phía sau của thẻ li
- Class cho thẻ li - định nghĩa trực tiếp các phần tử bên trong thẻ li
Tủy chỉnh thẻ li
Tôi xin đi thẳng vào nội dung chính của bài viết này luôn ạ. Để xem CSS nào dang dùng cho thẻ li, các bạn nhấn phím F12 hoặc nhấp phải vào trình duyệt rồi nhấp chọn Inspect (Kiểm tra). Giao diên trình duyệt sẽ xuất hiện khung hiển thị element và style của element như hình:
Tiếp theo các bạn nhấp chọn vào biểu tượng Select như hình trên. Sau đó di chuyển con trỏ chuột vào khung hiển thị trang web, đến và chọn thẻ li.
1. Tùy chỉnh CSS cho thẻ li:before
Các bạn nhấp chuột chọn ::before trên khung Elements. Tất cả CSS của lớp này sẽ được hiển thị dưới khung Styles. Chúng ta quan tâm đến thuộc tính contents, và cũng có thể thay đổi giao diện bằng cách thêm các thuộc tính vào class này. Mỗi trang Blog sẽ có tên các lớp khác nhau do người tạo định nghĩa, riêng của tôi là .post-body ul li:before.
Sau khi đã xác định được lớp định nghĩa li:before, chúng ta sẽ tìm kiếm icon ưng ý để thay thế. Trang web tìm kiếm font thường dùng của tôi:
- https://fontawesome.com/v4.7/icons/
Nhấp chọn icon, tiếp theo các bạn lưu ý đến phần Unicode. Ví dụ như tôi chọn Unicode: f058.
Trên phần quản lý Theme của Blogger, các bạn chọn edit HTML. Tiếp theo các bạn nhấp chuột vào khung code HTML, đồng thời nhấn tổ hợp phím Ctrl + F để tìm kiếm class before. Trong class before có thuộc tính contents, thay tất cả contents hiện tại bằng contents chúng ta mới tìm thấy bên trang Font Awesome.
Nhớ lưu lại các thao tác vừa làm, và tải lại trang hiển thị xem thay đổi như thế nào nhé. Nếu muốn thay đổi màu, kích thước,... thì các bạn thêm thuộc tính đó vào như các bước trên.
2. Tùy chỉnh CSS cho thẻ li
Thao tác cũng tương tự như như việc tùy chỉnh cho lớp li:before. Các bạn cũng tìm đến thẻ li, rồi sao chép class có ảnh hưởng trực tiếp đến thẻ li.
Tìm lớp mới sao chép trong phần edit HTML của Theme Blogger. Thay đổi thuộc tính mong muốn cho tất cả các lớp đã tìm thấy.
Nếu các bạn muốn chi tiết hơn, hãy xem video hướng dẫn ở đầu bài viết. Good Luck!