Home
  • Register
  • Login
kết quả từ 1 tới 3 trên 3
  1. #1
    Tham gia ngày
    Dec 2008
    Bài gởi
    2,673
    Được thích 4,053 lần trên tổng số 968 bài viết

    Default Hướng dẫn sử dụng các BBcode trong diễn đàn

    BBcode: các thẻ, câu lệnh được dùng trong bài viết. Bài viết của bạn sau khi gửi lên diễn đàn được hiển thị ra sao, trình bày thế nào... là phụ thuộc vào các BBcode này.
    Bài viết dưới đây mình sẽ hướng dẫn cách sử dụng và công dụng của các BBcode thường dùng diễn đàn.


    In đậm, in nghiêng, gạch chân, gạch ngang
    [B]In đậm[/B]
    [I]In nghiêng[/I]
    [U]Gạch chân[/U]
    [S]Gạch ngang[/S]
    In đậm
    In nghiêng
    Gạch chân
    Gạch ngang
    Kiểu chữ, cỡ chữ, màu chữ
    [FONT="Courier New"]Font chữ Courier New[/FONT]
    [SIZE="5"]Chữ cỡ 5[/SIZE]
    [COLOR="Red"]Màu đỏ[/COLOR]

    Font chữ Courier New
    Chữ cỡ 5
    Màu đỏ
    Căn lề trái, giữa, phải
    [LEFT]Căn trái[/LEFT]
    [CENTER]Căn giữa[/CENTER]
    [RIGHT]Căn phải[/RIGHT]

    Căn trái
    Căn giữa

    Căn phải

    Căn lề dịch sang phải một khoảng
    [INDENT]Căn lề dịch sang phải một khoảng[/INDENT]
    Căn lề dịch sang phải một khoảng
    Danh sách
    Kiểu số
    [LIST=1][*]1[*]2[/LIST]

    1. 1
    2. 2
    Kiểu hoa thị
    [LIST][*]1[*]2[/LIST]

    • 1
    • 2
    Kiểu chữ cái abc
    [LIST=a][*]1[*]2[/LIST]

    1. 1
    2. 2
    Trích dẫn
    Trích dẫn bình thường[QUOTE]This is http://yurivn.net forum[/QUOTE]

    This is http://yurivn.net forum
    Trích dẫn có nêu tên người viết
    [QUOTE="Gin"]This is http://yurivn.net forum[/QUOTE]

    Trích Từ bài viết của Gin
    This is http://yurivn.net forum
    Chèn link
    Chèn link bình thường
    [URL]http://yurivn.net[/URL]

    Chèn link vào nơi khác
    [URL="http://yurivn.net"]Yuri/shoujo-ai forum[/URL]

    Chèn hình
    [IMG]http://i85.photobucket.com/albums/k73/trang1104/tag2.png[/IMG]
    Chèn Flash, clip
    Xem chi tiết hơn tại: http://yurivn.net/showthread.php?t=4485
    [FLASH]http://www.youtube.com/v/TOUHWNeSG4c[/FLASH]
    Đưa vào "Nội dung ẩn"
    [SPOILER="Nội dung ẩn"]Nội dung[/SPOILER]
    Nội dung ẩn
    Tạo Tab
    [TABS]
    [TAB="Tên tab 1"]
    Nội dung tab 1
    Trong tab có thể sử dụng BBcode khác, dùng hình ảnh, xuống dòng, căn lề...
    [/TAB]

    [TAB="Tên tab 2"]
    Nội dung tab 2
    [/TAB]
    [/TABS]



    Nội dung tab 1
    Trong tab có thể sử dụng BBcode khác, dùng hình ảnh, xuống dòng, căn lề...
     



    Nội dung tab 2
     


  2. Có 13 thành viên thích bài viết của Gin:


  3. #2
    Tham gia ngày
    Dec 2008
    Bài gởi
    2,673
    Được thích 4,053 lần trên tổng số 968 bài viết

    Default Ðề: Hướng dẫn sử dụng các BBcode trong diễn đàn

    Hướng dẫn sử dụng BBcode STYLE


    Đây là một BBcode khá đồ sộ, nên mình viết hẳn một bài hướng dẫn riêng Bài hướng dẫn này gồm có bốn phần:
    I. BBcode STYLE là gì?
    II. Cách sử dụng BBcode STYLE
    III. Cách viết các tính chất trong BBcode STYLE
    IV. Giới thiệu và hướng dẫn một số ứng dụng của BBcode STYLE


    I. BBcode STYLE là gì?

    Trước khi vào phần hướng dẫn sử dụng, mình sẽ giải thích sơ qua về BBcode STYLE. BBcode này thực chất là tạo nên một cái hộp đựng nội dung mà ta viết bên trong, chiếc hộp này có thể co giãn tùy vào nội dung bên trong nó, và có thể tô vẽ nắn bóp để chiếc hộp có hình dạng như ý muốn, qua đó, bài viết sẽ trở nên lung linh lộng lẫy hơn.

    II. Cách sử dụng BBcode STYLE

    Cách sử dụng thì đơn giản thôi, cũng như các BBcode khác, bạn bao nó ra ngoài một nội dung nào đó mà bạn cần đóng hộp: [style]<Nội dung bên trong>[/style]
    Khi sử dụng code trên, ta sẽ có: [style]<Nội dung bên trong>[/style]

    Tới đây, bạn sẽ thắc mắc "tại sao lại chẳng có gì xảy ra cả?", điều đó là đương nhiên, bởi ta mới chỉ tạo ra một cái hộp không màu, không mùi vị cần phải cho nó một hình dạng cụ thể, thì mới có thể nhận ra sự hiện diện của nó. Giả sử, mình tô cho nó một màu xanh: [style=background:blue;]<Nội dung bên trong>[/style], mình sẽ có:
    <Nội dung bên trong>

    Giờ thì đã rõ ràng hơn rồi

    Các tính chất thêm vào BBcode này sẽ được viết dưới dạng:
    [style=<tính chất>;]<Nội dung bên trong>[/style]
    Có thể kết hợp nhiều tính chất cùng lúc vào một BBcode, và đừng quên dấu chấm phẩy nhé, mỗi tính chất cần có một dấu chấm phẩy, để ngăn cách với các tính chất khác.

    Đó là điểm sơ qua về cách sử dụng BBcode STYLE. Phần bên dưới mình sẽ hướng dẫn các bạn cách viết các tính chất dùng trong BBcode này.

    III. Cách viết các tính chất trong BBcode STYLE

    Các tính chất này thực ra là các câu lệnh CSS, bạn nào có hiểu biết về CSS thì khỏi phải đọc phần này nữa, cứ như vậy mà áp dụng vào thôi. Các bạn cũng có thể tìm hiểu về các câu lệnh CSS ở đây: http://www.w3schools.com/css/default.asp Phần dưới mình sẽ chỉ đề cập đến những câu lệnh cơ bản, chắc chắn không thể đầy đủ chi tiết như link vừa dẫn.

    Sau đây là các tính chất cơ bản của BBcode STYLE:

    1. Chiều dài, chiều rộng:

    Mô tả: chỉnh chiều dài, chiều rộng.
    Nội dung câu lệnh:
    - chỉnh chiều dài: height: <giá trị>px;
    - chỉnh chiều rộng: width: <giá trị>px;
    Ví dụ:
    - BBcode:
    HTML Code:
    [style=width:200px;]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


    2. Căn lề:

    Mô tả: căn cho cả khung dịch đi một khoảng.
    Nội dung câu lệnh:
    - Dịch đi một khoảng so với lề trái: margin-left: <giá trị>px;
    - Dịch đi một khoảng so với lề phải: margin-right: <giá trị>px;
    - Dịch đi một khoảng so với lề trên: margin-top: <giá trị>px;
    - Dịch đi một khoảng so với lề dưới: margin-bottom: <giá trị>px;
    - Chính giữa: margin: auto;
    Ví dụ:
    - BBcode:
    HTML Code:
    [style=margin-left:200px;]Lorem ipsum dolor sit amet, consectetuer  adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat  volutpat.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


    3. Nền:
    Mô tả: tô màu hoặc dựng hình nền
    Nội dung câu lệnh:
    - Màu nền: background: <mã màu>;
    *Chú ý: Mã màu có thể lấy tại các trang web color picker như: http://www.colorpicker.com/ Ví dụ #00B3FF là màu xanh da trời.

    - Màu nền sử dụng mã RGB làm mã màu: background: rgba(<giá trị R>,<giá trị G>,<giá trị B>,<độ rõ nét>);
    * Chú ý: Mã RGB này cũng có thể lấy tại trang colorpicker.com, bên dưới khung màu bạn sẽ thấy các giá trị H,S,B,R,G,B, copy 3 giá trị cuối và điền vào chỗ tương ứng. Dùng cái này rắc rối hơn lệnh background trên, nhưng bù lại có thể chỉnh độ mờ của nền.

    - Hình nền: background-image: url('<link hình ảnh>');
    *Chú ý: Đối với background-image, thường có thêm các câu lệnh sau đây đi kèm:
    - background-repeat: no-repeat; Không lặp hình nền khi hình nền nhỏ hơn khung nội dung.
    - background-attachment: fixed; Hình nền sẽ trôi xuống cùng với lúc ta cuộn chuột.
    - background-position: <giá trị>px / center; Vị trí của hình nền.
    - background-size:
    <chiều rộng>px <chiều dài>px; Resize hình nền, có thể chỉ resize chiều dài hoặc chiều rộng bằng cách đặt giá trị cho một chiều và "auto" cho chiều còn lại.
    Ví dụ:
    - BBcode:
    HTML Code:
    [style=background-image: url('http://yurivn.net/images/smilies/thotrang/56.gif');]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse  molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber  tempor cum soluta nobis eleifend option congue nihil imperdiet doming id  quod mazim placerat facer possim assum.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


    4. Viền:
    Mô tả: tạo một đường viền cho khung nội dung.
    Nội dung câu lệnh và các câu lệnh liên quan:
    - Viền trên: border-top: <màu viền (sử dụng mã màu)> <loại viền> <độ dày của viền>px;
    - Viền dưới: border-bottom: <màu viền (sử dụng mã màu)> <loại viền> <độ dày của viền>px;
    - Viền trái: border-left: <màu viền (sử dụng mã màu)> <loại viền> <độ dày của viền>px;
    - Viền phải: border-right: <màu viền (sử dụng mã màu)> <loại viền> <độ dày của viền>px;
    - Viền bốn phía: border: <màu viền (sử dụng mã màu)> <loại viền> <độ dày của viền>px;
    Các loại viền gồm có:
    - solid: viền thường.
    - dotted: viền chấm chấm.
    - dashed: viền gạch đứt.
    - double: hai viền.
    - và các loại viền khác: groove, inset, outset, ridge.


    - Làm tròn các góc của viền: border-radius: <độ tròn góc trên-trái>px <độ tròn góc trên-phải>px <độ tròn góc dưới-phải>px <độ tròn góc dưới-trái>px;
    - Làm tròn chung cho cả 4 góc của viền: border-radius: <độ tròn>px;
    Ví dụ:
    - BBcode:
    HTML Code:
    [style=border:2px solid #a1a1a1;border-radius:10px;]Lorem ipsum dolor sit amet, consectetuer   adipiscing elit, sed diam  nonummy nibh euismod tincidunt ut laoreet   dolore magna aliquam erat  volutpat.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


    5. Đổ bóng:
    Mô tả: đổ bóng cho khung nội dung.
    Nội dung câu lệnh:
    - box-shadow: <độ lệch của bóng từ phía trái>px <độ lệch của bóng từ phía trên>px <độ mờ của bóng> <màu bóng>;
    *Chú ý: Nếu đặt 2 độ lệch là 1px và độ mờ tùy ý, ta sẽ có một lớp viền mờ mờ ở ngoài khung nội dung.

    Ví dụ:
    - BBcode:
    HTML Code:
    [style=box-shadow:1px 1px 20px #000;]Lorem ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam  nonummy nibh  euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat. Ut  wisi enim ad minim veniam, quis nostrud exerci tation  ullamcorper  suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem  vel eum iriure dolor in hendrerit in vulputate velit esse  molestie  consequat, vel illum dolore eu feugiat nulla facilisis at vero  eros et  accumsan et iusto odio dignissim qui blandit praesent luptatum  zzril  delenit augue duis dolore te feugait nulla facilisi. Nam liber  tempor  cum soluta nobis eleifend option congue nihil imperdiet doming id  quod  mazim placerat facer possim assum.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.



    6. Độ mờ:
    Mô tả: chỉnh độ mờ.
    Nội dung câu lệnh:
    - opacity: <độ rõ nét>;
    *Chú ý: Độ rõ nét này sử dụng giá trị trong khoảng từ 0 đến 1, 1 là rõ hoàn toàn, 0 là mờ hoàn toàn. Sử dụng lệnh này sẽ làm mờ tất cả nội dung, hình ảnh bên trong BBcode, nên cân nhắc trước khi dùng .

    Ví dụ:
    - BBcode:
    HTML Code:
    [style=background-image: url('http://yurivn.net/images/smilies/thotrang/56.gif');opacity:0.5;]Lorem ipsum  dolor sit amet,  consectetuer adipiscing elit, sed diam  nonummy nibh  euismod tincidunt  ut laoreet dolore magna aliquam erat  volutpat. Ut  wisi enim ad minim  veniam, quis nostrud exerci tation  ullamcorper  suscipit lobortis nisl  ut aliquip ex ea commodo consequat.  Duis autem  vel eum iriure dolor in  hendrerit in vulputate velit esse  molestie  consequat, vel illum  dolore eu feugiat nulla facilisis at vero  eros et  accumsan et iusto  odio dignissim qui blandit praesent luptatum  zzril  delenit augue duis  dolore te feugait nulla facilisi. Nam liber  tempor  cum soluta nobis  eleifend option congue nihil imperdiet doming id  quod  mazim placerat  facer possim assum.[/style]
    - Kết quả:
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


    Hiện tại mình nghĩ như vậy là tạm đủ, bao giờ cần thêm tính chất gì, mình sẽ cập nhật thêm vào bài viết này.


    IV. Giới thiệu và hướng dẫn một số ứng dụng của BBcode STYLE
    Ứng dụng 1:

  4. Có 13 thành viên thích bài viết của Gin:


  5. #3
    Tham gia ngày
    Dec 2008
    Bài gởi
    2,673
    Được thích 4,053 lần trên tổng số 968 bài viết

    Default Ðề: Hướng dẫn sử dụng các BBcode trong diễn đàn

    Một số BBcode hiệu ứng


    Đã có BBcode Style, giờ mình add thêm một số BBcode hiệu ứng để hỗ trợ cho nó Trên CSS có khá nhiều kiểu hiệu ứng, nhưng hiện mình chỉ thấy có 2 cái là phù hợp với forum:

    1. Hover: Hiệu ứng kích hoạt khi lia chuột vào
    Tên BBcode: HOVER

    Mô tả: Khi lia chuột vào Nội dung được bọc BBcode này ra ngoài, style của nội dung sẽ chuyển sang style đã ghi trong BBcode

    Cách dùng:
    HTML Code:
    [HOVER=<Tên nội dung>| <Code style>]<Nội dung bên trong>[/HOVER]
    <Tên nội dung>: Tên của nội dung đặt bên trong code. Bạn chỉ cần đặt đại một cái tên nào đó, miễn là trong cả page, không có bài viết nào (của bạn hoặc người khác) sử dụng tên đó. Cách an toàn nhất là dùng tên của chính bạn, vd: Gin1, Gin2...
    <Code style>: Các code CSS vẫn thường dùng trong BBcode style, xem lại bài hướng dẫn về BBcode style để tham khảo. Lưu ý: mỗi một code phải thêm !important trước dấu ; .VD: margin:auto !important;
    <Nội dung bên trong>: Phần nội dung chính. Phần này sẽ không thay đổi dù có lia chuột vào hay không, có thể dùng BBcode style.

    Ví dụ:
    - Ví dụ 1: Tạo viền đen khi lia chuột vào:
    HTML Code:
    [HOVER=Gin001|border:1px solid #000 !important;width: 200px!important;]Lia chuột vào đây[/HOVER]
    [HOVER=Gin001|border:1px solid #000 !important;width: 200px!important;]Lia chuột vào đây[/HOVER]

    - Ví dụ 2: Đổi màu nền:
    HTML Code:
    [HOVER=Gin002|background:red !important;width: 200px!important;][STYLE=background:yellow;]Lia chuột vào đây[/STYLE][/HOVER]
    [HOVER=Gin002|background-color:red !important;width: 200px!important;]
    Lia chuột vào đây
    [/HOVER]


    2. ACTIVE: Hiệu ứng kích hoạt khi click chuột

    Tên BBcode: ACTIVE

    Mô tả: Khi click và giữ chuột vào Nội dung được bọc BBcode này ra ngoài, style của nội dung sẽ chuyển sang style đã ghi trong BBcode. Nội dung sẽ trở lại như cũ khi thả tay giữ chuột.

    Cách dùng:
    HTML Code:
    [ACTIVE=<Tên nội dung>| <Code style>]<Nội dung bên trong>[/ACTIVE]
    <Tên nội dung>: Tên của nội dung đặt bên trong code. Bạn chỉ cần đặt đại một cái tên nào đó, miễn là trong cả page, không có bài viết nào (của bạn hoặc người khác) sử dụng tên đó. Cách an toàn nhất là dùng tên của chính bạn, vd: Gin1, Gin2...
    <Code style>: Các code CSS vẫn thường dùng trong BBcode style, xem lại bài hướng dẫn về BBcode style để tham khảo. Lưu ý: mỗi một code phải thêm !important trước dấu ; .VD: margin:auto !important;
    <Nội dung bên trong>: Phần nội dung chính. Phần này sẽ không thay đổi dù có click chuột vào hay không, có thể dùng BBcode style.

    Ví dụ:

    - Ví dụ 1: Tạo viền đen khi click chuột:
    HTML Code:
    [ACTIVE=Gin003|border:1px solid #000 !important;width: 200px!important;]click chuột vào đây[/ACTIVE]
    [ACTIVE=Gin003|border:1px solid #000 !important;width: 200px!important;]click chuột vào đây[/ACTIVE]

    - Ví dụ 2: Đổi màu nền:
    HTML Code:
    [ACTIVE=Gin004|background:red !important;width: 200px!important;][STYLE=background:yellow;]click chuột vào đây[/STYLE][/ACTIVE]
    [ACTIVE=Gin004|background-color:red !important;width: 200px!important;]
    click chuột vào đây
    [/ACTIVE]

  6. Có 4 thành viên thích bài viết của Gin:


Quuyền Hạn Của Bạn

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •