Hiển Thị Danh Sách Label Với Nhiều Cột

Hiển Thị Danh Sách Label Với Nhiều Cột

Blogger quản lý chủ đề của blog bởi những tên label. Có người sử dụng chúng như những Category trong Wordpressvà để ở dạng list, cũng có người thì sử dụng như những thẻ Tag và để ở dạng cloud. 

Nếu như bạn muốn dùng widget label để hiển thị số đếm bài viết, tự động cập nhật tên label mới và đang để hiển thị theo dạng list thì có một điều bất tiện là danh sách label mặc định của blogspot chỉ gồm 1 cột. Để hiển thị dưới dạng 2 cột hoặc nhiều hơn chúng ta thêm một vài thuộc tính cho style sheet của blog.

Bước 1: Thêm thuộc tính cho class Label. Chèn đoạn mã dưới đây vào trước thẻ ]]></b:skin>trong style sheet blog của bạn.

.Label li{float:left;width:50%}

Bước 2: Tìm đến đoạn mã của widget label này (Ctrl + F với từ khóa id='Label1'). Trong đoạn mã của widget này có duy nhất 1 thẻ đóng </ul>, chèn đoạn mã dưới đây vào sau thẻ </ul>.

<div style="clear:both"/>

Lưu Ý: 

Thay vì khai báo với class Label chúng ta có thể đổi thành id Label1. Ở đây mình khai báo với class để có thể sử dụng tiếp cho các thành phần khác cùng kiểu hiển thị. Hoặc khai báo với class cloumn chẳng hạn, khi đó cần thay thẻ mở <ul> bằng <ul class='cloumn'>.

Với 2 cột thì thuộc tính width có giá trị 50%, 3 cột sẽ là 33%... Đây là giá trị tương đối, bạn có thể sử dụng giá trị tuyệt đối. Giả sử widget này đặt ở sidebar có width là 300px, muốn hiển thị 2 cột giá trị width của thành phần li trong Label sẽ là 150px, 3 cột là 100px...

Một điều đặc biệt lưu ý là giả sử widget này đặt ở sidebar và trong style sheet của bạn thành phần licủa sidebar có thuộc tính margin cách trái hoặc phải với khoảng cách lớn hơn 0 thì bạn cần giảm giá trị width nhỏ hơn 50%.