Trang chủ \ 08:36

Hiển thị danh sách Label với nhiều cột

label listBlogger 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 Wordpress và để ở dạng list, cũng có người thì sử dụng như những thẻ Tag và để ở dạng cloud. Nếu blog của bạn đang hiển thị label ở dạng list, không cần quan tâm đến số đếm bài viết trong mỗi label và cũng không thường xuyên tạo một label mới thì không cần thiết phải sử dụng widget label của Blogger. Hãy tự tạo widget HTML/Javascript hoặc chèn ngay trong template đoạn mã để hiển thị những label, việc này sẽ giúp Blogger không mất công xử lý dữ liệu từ widget label rồi chỉ để hiển thị điều mà chúng ta có thể tự làm được với mã HTML đơn giản.

Còn 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 này 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"/>

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 column chẳng hạn, khi đó cần thay thẻ mở <ul> bằng <ul class='column'>.

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 li củ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%.

Hãy kết hợp với thủ thuật Hiển thị số bài đăng trong label ở dạng title và nếu blog bạn đang sử dụng phân trang thì tham khảo thêm Sửa lỗi không phân trang khi xem theo nhãn.
Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

Chia sẻ

24

Nhận xét
1

một ý tưởng mới, mình toàn để label ở dạng mây, thích sự lộn xộn :)

Reply
2

Label của blog bác giống kiểu tag nên để dạng cloud là hợp lý. Ý tưởng này cũng không mới, chỉ là em thấy ít người tùy biến với widget của Blogger mà thường tạo widget HTML/Javascript khi muốn hiển thị label nhiều cột

Reply
3

Hay lắm ! Rất sáng tạo:))

Reply
4

Với số lượng label khổng lồ của bác rùa thì kiểu hiển thị này chắc không phù hợp :))

Reply
5

Hay. mothuthuat.com lâu rồi lại ko có thủ thuật mới nhỉ :D

Reply
6

Thanks anh đã chia sẻ, bài viết hay ^^ :)

Reply
7

@Noct
Ngày xưa viết blog chẳng biết viết về cái gì nên nó cứ lang man, đặt Label như tab mới chết gì, không nỡ xóa, kệ nó vậy :)

Reply
8

Cho tớ liên kết link với :)

Reply
Dương 16/4/11 21:13
9

Tại sao em áp dụng được chiêu này của Bac Duy dzị kìa, Bac Duy help em Xíu .

Reply
Dương 16/4/11 21:37
10

Tại sao bài này ngắn có xíu mà mình làm không được ta? Bác Duy Có thể hướng dẫn rõ hơn cho em vọc xíu không Em đọc từng chữ một vẩn không hiểu .

Reply
11

Làm theo bác nhưng nó ko hiển thị thành 2 cột được nhờ bác duy pham chỉ lại giúp làm sao để label hiển thị cả bên phải lẫn trái cùng 1 label1

Reply
12

Thứ 2 là nó đã chia ra nhưng nhãn chỉ hiển thị ở bên trái mà ko tự ngắt 1 phần sang bên phải vậy làm thể nào để ngắt phần nhãn còn lại sang bên phải để nó hiển thị thành 2 cột

Reply
13

@Duy Bạn có thể giảm width xuống 49% hoặc nhỏ hơn, hoặc là đặt width với giá trị tuyệt đối như 100px... tùy vào width sidebar blog bạn.

Reply
14

Làm sao có thể tạo mục liên kết bạn bè phân ra 2 cột như của Duy vậy?

Reply
15

@peace19812006 Bác view source mà xem, ở chỗ có 1 class cloumn tại thẻ ul, và khai báo class này ở style sheet. Width của class này có thể giảm dưới 50% khi nào phân thành 2 thì thôi.

Reply
17

Thanks, thủ thuật rất đơn giản mà hiệu quả rất cao, lúc trước em phải phân các section thành các cột bằng nhau, nhưng bây giờ thì chỉ cần 1 dòng code. quá hay Vote bác

Reply
Ryu Kenshin 22/9/11 21:50
18

Duy Pham có thể chỉ cho mình cách làm label giống của bạn được không :) ( cái ở góc trái dưới màn hình)

Reply
19

I think under ie5 it doesn't work...

Reply
20

You're a thief, fuck.

Reply
21

hey men are you crazy!

Reply
22

i had deleted all sources, besides i have promised you Master duy, and it's the last time that you insult me, try to be polite with your visitors bye

Reply
23

Nhận xét này đã bị tác giả xóa.

Reply
24

Bài viết rất bổ ích!!! Top Viewed

Reply

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.