Bạn muốn học BBcode nhưng chưa biết nên bắt đầu từ đâu? Các tutorial trong box quá khó để hiểu đối với bạn? Tutorial này sẽ tập hợp tất cả những thứ cơ bản nhất, phù hợp với những bạn mới làm quen với hệ thống BBcode của forum.
Bài viết được dựa trên tutorial Muốn học BBcode nên bắt đầu từ đâu? của mod Kaldorei ở forum cũ, có chỉnh sửa và bổ sung để phù hợp với forum mới, viết bởi Mèo Soulea.
Tips: Bấm quote để xem code một post mình muốn tham khảo.
1. Sử dụng những code có sẵn trên khung soạn thảo
Các bạn không nhất thiết phải nắm được tất cả cách sử dụng của toàn bộ BBcode trên đó, chỉ cần nắm được những BBcode sau:
[font], [size], [color], [b], [i], [u]
[left], [right], [center], [url], [img], [quote]
[hide], [spoil] [szyoutube] và [szflash]
Ví dụ:
**Nội dung ẩn: Để xem được nội dung này bạn phải có số bài gửi lớn hơn hoặc bằng 2.**
[HIDE=2]Bạn phải đủ 2 post mới thấy được dòng này[/HIDE]
Tiêu đề
Bạn phải nhấn vào nút "Xem" mới thấy được dòng này
[SPOIL=Tiêu đề]Bạn phải nhấn vào nút "Xem" mới thấy được dòng này[/SPOIL]
color:#333;padding:15px; là các quy định do mình đặt ra, ngăn cách với nhau bởi dấu ;
#282828 là màu viền
1 là độ dày viền
15 là độ cong của các cạnh trên-trái và dưới-phải (tính bằng px)
30 là độ cong của các cạnh trên-phải và dưới-trái (tính bằng px)
Lưu ý: Có thể bỏ trống các thuộc tính: màu nền, màu viền, độ dày viền, độ cong của các cạnh trên-trái và dưới-phải hay các cạnh trên-phải và dưới-trái nếu không cần thiết, hoặc quy định đặt ra (nếu bỏ trống hết thì code sẽ trống trơn như thế này )
nội dung box
[box=;||||]nội dung box[/box]
Các quy định có thể đặt ra trong code [box] các bạn có thể tham khảo tại đây.
4. BBcode [limit], [limitr]
Có thể bạn biết thừa rồi
[limit] và [limitr] là những bbcode đầu tiên được add vào forum cũ.
[limit] và [limitr] dựa vào thuộc tính float nhằm tạo layout dạng cột.
Sử dụng và cú pháp?
nội dung bên trái
nội dung bên phải
[limit=110][box=;width:100px;border:1px solid;||||]nội dung bên trái[/box][/limit]nội dung bên phải[clear][/clear]
[limit=width-của-nội-dung-bên-trái]nội dung bên trái[/limit]nội dung bên phải[clear][/clear]
hoặc là:
nội dung bên phải
nội dung bên trái
[limitr=110][box=;width:100px;border:1px solid;||||]nội dung bên phải[/box][/limitr]nội dung bên trái[clear][/clear]
[limit=width-của-nội-dung-bên-phải]nội dung bên phải[/limit]nội dung bên trái[clear][/clear]
Nếu bạn quá lười tính width như mình?
Bạn có thể xài box có float và margin (để cách nội dung limit ra cho dễ nhìn), với cái này cũng linh động hơn vì không phải set width bằng tay nữa.
nội dung bên trái
abcxyz nội dung bên phải
[box=;margin:0 0 10px 10px;float:left;padding:10px;|1|||][img]http://vnsharing.site/forum/vbbdesign/vnsharing/footer.jpg[/img]
[CENTER]nội dung bên trái[/CENTER][/box]abcxyz nội dung bên phải[clear][/clear]
nội dung bên phải
abcxyz nội dung bên trái cực cực dàiiiiiiiiiiiii
dài dàiiiiiiiiiiiiiiiiiiiiiiiii
[box=;margin:0 0 10px 10px;float:right;padding:10px;|1|||][img]http://vnsharing.site/forum/vbbdesign/vnsharing/footer.jpg[/img]
[CENTER]nội dung bên phải[/CENTER][/box]abcxyz nội dung bên trái cực cực dàiiiiiiiiiiiii
dài dàiiiiiiiiiiiiiiiiiiiiiiiii[clear][/clear]
Cậu thêm code [clear][/clear] vào làm gì vậy?
Giả dụ ta có 1 box lớn, chứa một số box nhỏ bên trong. Tuy vậy các box nhỏ bên trong là code [limit], [limitr], box có float:left/right... Những box nhỏ có float này không đóng góp vào height của box lớn, như sau:
Trước khi thêm code [clear][/clear]
float:left
float:right
Sau khi thêm code [clear][/clear]
float:left
float:right
Hoặc cũng có thể thêm overflow:auto vào box lớn
float:left
float:right
và ngừng căn limit trong nội dung, ví dụ như là:
nội dung trái
nội dung phải
xuống dòng
không có clear
có clear
[limit=200][box=;height:200px;||1||]nội dung trái[/box][/limit]nội dung phải
xuống dòng
không có clear
[clear][/clear]
có clear
Tác dụng của việc này thì, ờm, để tránh hỏng layout của code.
5. BBcode [margin]
BBcode [margin] cho phép bạn tách nội dung ra khỏi lề. Tác dụng để cho người đọc dễ đọc những nội dung dài.
Tuyệt đối không set width cho [margin] lớn hơn 1300 (lớn hơn thì các màn hình có độ phân giải dưới 1300 sẽ hiện thanh cuộn ngang, gây khó chịu cho người nhìn).
Sau đây là một số mẹo set width cho BBcode [margin]:
[margin=978]code abc xyz[/margin]
cái 978 nó là chỉ số vàng trong coder rồi, áp dụng margin = 978 thì chuẩn cơm mẹ nấu rồi
mình nhập tâm lời bạn Hiitagi từng nói rằng 960px mới là vương đạo vì nó có thể chia làm 1 2 3 4 5 6 8 10 12 ... cột, nghe rất hoàn mỹ
Nguyên văn bởi 2 bạn Snake ♥ Fox và Scheherazade, vì sợ 2 bạn dính thông báo quote nên mình không dám quote hết
Mọi sai sót trong tutorial hãy góp ý cho mình biết, cảm ơn nhiều
)
nội dung boxvì nó có thể chia làm 1 2 3 4 5 6 8 10 12 ... cột, nghe rất hoàn mỹ
Gửi bởi Guru
Đánh dấu