Bách khoa BBCode

Thật ra mấy thứ này có thể tìm thấy ở phần 'Trợ giúp' phía cuối cùng của forum, nhưng có vẻ không ai biết nên thôi bưng lên đây

Spoiler: Cơ bản

• HTML:

  [B], [I], [U], [S] - Bold, Italics, Underline, and Strike-through

  
  Làm cho vùng chữ được bôi trở thành in đậm, in nghiêng, gạch chân hoặc gạch ngang.
  Ví dụ:
  
  HTML:

  This is [B]bold[/B] text.
  This is [I]italic[/I] text.
  This is [U]underlined[/U] text.
  This is [S]strike-through[/S] text.

  Hiển thị:
  This is bold text.
  This is italic text.
  This is underlined text.
  This is strike-through text.
  
  =========================================
  
  
• HTML:

  [COLOR=color], [FONT=name], [SIZE=size] - Text Color, Font, and Size

  
  Thay đổi màu sắc, phông chữ hoặc kích thước của ký tự được chọn.
  
  Ví dụ:
  
  HTML:

  This is [COLOR=red]red[/COLOR] and [COLOR=#0000cc]blue[/COLOR] text.
  This is [FONT=Courier New]Courier New[/FONT] text.
  This is [SIZE=1]small[/SIZE] and [SIZE=7]big[/SIZE] text.

  Hiển thị:
  This is red and blue text.
  This is Courier New text.
  This is small and big text.
  
  
  =========================================
  
  
• HTML:

  [URL], [EMAIL] - Linking

  
  Chèn liên kết tại Ký tự được bao quanh.
  
  Ví dụ:
  
  HTML:

  [URL]http://www.example.com[/URL]
  [EMAIL]example@example.com[/EMAIL]

  Hiển thị:
  http://www.example.com
  example@example.com
  
  =========================================
  
  
• HTML:

  [URL=link], [EMAIL=address] - Linking (Advanced)

  
  Chèn liên kết cho trang web hoặc địa chỉ email cho vùng chọn.
  
  Ví dụ:
  
  HTML:

  [URL=http://www.example.com]Go to example.com[/URL]
  [EMAIL=example@example.com]Email me[/EMAIL]

  Hiển thị:
  Go to example.com
  Email me
  
  =========================================
  
  
• HTML:

  [USER=ID] - Profile Linking

  
  Links to a user's profile. This is generally inserted automatically when tagging a user.
  
  Ví dụ:
  
  HTML:

  [USER=1]Admin[/USER]

  Hiển thị:
  @Admin
  
  =========================================
  
  
• HTML:

  [IMG] - Image

  
  Chèn hình ảnh vào bài viết
  
  Ví dụ:
  
  HTML:

  [IMG]https://vnsharing.vn/styles/brivium/nickel/xenforo/avatars/avatar_s.png[/IMG]

  Hiển thị:
  
  
  =========================================
  
  
• HTML:

  [MEDIA=site] - Chèn media

  
  Chèn video, flash đa phương tiện từ trang web được phép vào nội dung bài viết. Bạn nên dùng nút MEDIA ở thanh công cụ soạn thảo của diễn đàn. Approved sites: Dailymotion; Facebook; Liveleak; Metacafe; Vimeo; YouTube; Zing MP3;
  
  Ví dụ:
  
  HTML:

  [MEDIA=youtube]oHg5SJYRHA0[/MEDIA]

  Hiển thị:
  Một video Youtube sẽ hiện ra ở đây.
  
  =========================================
  
  
• HTML:

  [LIST] - Lists

  
  Hiển thị danh sách theo kiểu dấu chấm hoặc số.
  
  Ví dụ:
  
  HTML:

  [LIST]
  [*]Bullet 1
  [*]Bullet 2
  [/LIST]
  [LIST=1]
  [*]Entry 1
  [*]Entry 2
  [/LIST]

  Hiển thị:
  • Bullet 1
  • Bullet 2
  1. Entry 1
  2. Entry 2
  
  =========================================
  
  
• HTML:

  [LEFT], [CENTER], [RIGHT] - Text Alignment

  
  Thay đổi kiểu căn lề của vùng chữ được chọn.
  
  Ví dụ:
  
  HTML:

  [LEFT]Left-aligned[/LEFT]
  [CENTER]Center-aligned[/CENTER]
  [RIGHT]Right-aligned[/RIGHT]

  Hiển thị:
  
  Left-aligned​
  Center-aligned​
  Right-aligned​
  
  
  =========================================
  
• HTML:

  [QUOTE] - Quoted Text

  
  Hiển thị ký tự đã được trích từ nguồn khác. Bạn có thể đặt tên của nguồn.
  
  Ví dụ:
  
  HTML:

  [QUOTE]Quoted text[/QUOTE]
  [QUOTE=A person]Something they said[/QUOTE]

  Hiển thị:
  
  =========================================
  
  
• HTML:

  [SPOILER] - Nội dung spoiler

  
  Nội dung có thể chứa spoiler và yêu cầu người dùng phải click vào mới có thể xem được.
  
  Ví dụ:
  
  HTML:

  [SPOILER]Simple spoiler[/SPOILER]
  [SPOILER=Spoiler Title]Spoiler with a title[/SPOILER]

  Hiển thị:
  
  Spoiler

  Simple spoiler
  Spoiler: Spoiler Title

  Spoiler with a title
  
  
  =========================================
  
  
• HTML:

  [PHP], [HTML] - Programming Code Display

  
  Hiển thị ký tự dưới dạng một số ngôn ngữ lập trình.
  
  Ví dụ:
  
  HTML:

  General
  html

  PHP:

  echo $hello . 'world';
  
  =========================================
  
  
  [*]
  HTML:

  [INDENT] - Text Indent

  
  Thụt dòng cho văn bản
  
  Ví dụ:
  
  HTML:

  Regular text
  [INDENT]Indented text
  [INDENT]More indented[/INDENT]
  [/INDENT]

  Hiển thị:
  Regular text
  
  Indented text
  

  More indented​
  
  =========================================
  
  
  [*]
  HTML:

  [PLAIN] - Plain Text

  
  Vô hiệu hóa BBCode của đoạn văn bản được chọn.
  
  Ví dụ:
  
  HTML:

  [PLAIN]This is not [B]bold[/B] text.[/PLAIN]

  Hiển thị:
  This is not [B]bold[/B] text.
  
  =========================================
  
  
  [*]
  HTML:

  [ATTACH] - Chèn file đính kèm

  
  Chèn file đính kèm
  
  Ví dụ:
  
  HTML:

  Hình thu nhỏ: [ATTACH]123[/ATTACH]
  Full Size: [ATTACH=full]123[/ATTACH]

  Hiển thị:
  Nội dung được đính kèm

=========================================


[*]

HTML:

[JUSTIFY] - Text Alignment

Canh đều văn bản

Ví dụ:

HTML:

[justify]Một đoạn nhiều text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text [/justify]

Hiển thị:

Một đoạn nhiều text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

=========================================


[*]

HTML:

[box] - Định dạng văn bản bằng khung

Tạo khung cho văn bản dạng hình hộp.

Ví dụ:

HTML:

[box=; color: #EC5566; ]Nội dung[/box]

Hiển thị:

Nội dung

=========================================


[*]

HTML:

[szimg] - Thay đổi kích thước ảnh

Code dùng để thay đổi kích thước ảnh được chèn

Ví dụ:

HTML:

[szimg=250|]http://puu.sh/nDE7t.jpg[/szimg]

Hiển thị:


=========================================


[*]

HTML:

[tooltip] - Tooltip

Tooltip

Ví dụ:

HTML:

[tooltip=]abc[tip=top]123[/tip][/tooltip]

Hiển thị:
abc123
[/LIST]

 

Giới thiệu thuộc tính code BOX

Hiện tại Box là BBCode có nhiều tùy biến nhất và có thể áp dụng để trình bày văn bản trong mọi trường hợp, do tạm thời đã loại bỏ hết các loại table, limit, margin,... Cho nên chúng ta phải dùng BOX để xử lý mọi tình huống trong trình bày văn bản.
Báo trước là admin cũng thuộc loại dốt BBCode, nhưng vì không có ai làm nên đành lết cái thân gà mờ này đi hướng dẫn... Lỡ có sai thì đại thần BBCode vào hỗ trợ chỉnh sửa cái =)) Tạm tổng hợp các thuộc tính của code box mà mình biết ở đây để mọi người dễ mò hơn nhé. Còn thiếu thuộc tính nào thì mọi người đóng góp để bổ sung hộ.

Ví dụ

HTML:

[BOX=#d1d1d1; margin:auto; padding:40px; color:black; border-radius: 30px 0px 10px 100px; border: 5px grey; border-style: dotted dashed double solid; height: 450px; width: 600px; font-style: italic; text-align: justify]Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. [box=; float: right; margin: 20px 0px 20px 20px; opacity: 0.5][SZIMG=200]https://www.w3schools.com/css/pineapple.jpg[/SZIMG][/box]Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.[box=grey; width:100px; height: 120px; float: left; margin: 20px 20px 20px 0px; padding: 20px] Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.[/box] Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.[/BOX]

Hiển thị​

Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.

Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.

Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.

Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu. Đây là văn bản mẫu.

Thuộc tính là lệnh để tùy biến như đổi màu nền, màu chữ, font, margin, chiều cao, chiều dài, viền, khung,... Khi thêm thuộc tính vào box, các thuộc tính phải cách nhau bởi dấu chấm phẩy " ; "

Spoiler: List thuộc tính BOX (updating...)

Color: có thể điền hex(?, ?, ?), rbg#???, HSL, màu cơ bản black white yellow red blue,...), transparent
Style: solid, dotted, dashed, double
px: điền chữ số
Thuộc tính luôn có thứ tự: top right bottom left. Khi điền thuộc tính nếu chỉ ghi một giá trị ví dụ: 30px hoặc dashed thì tự động áp dụng giá trị này cho cả 4.

Nền - Background
box=transparent không nền
box=color nền màu
background-color: color nền màu
box=url('link') dùng ảnh làm nền
background-image: url('link') dùng ảnh làm nền
opacity: 0->1 tăng giảm độ trong suốt của box, ví dụ 0.5

Viền - Border
border: ?px style color cơ bản
border-style: style style style style chọn style riêng cho các vị trí viền
border-radius: ?px ?px ?px ?px bẻ cong góc viền

Chữ - Text
color: color màu chữ
font-size: ?px kích thước chữ
font-style: bold/italic/underline/line-through màu mè hoa lá cành cho chữ
text-align: justify/center/left/right định dạng văn bản
line-height: ?px/? khoảng cách giữa các dòng, dùng đơn vị px, nếu chỉ ghi số thì tương ứng 100%=1, 150%=1.5,...

Kích thước - Size
height: ?px cao
width: ?px rộng
Nếu không set kích thước thì box sẽ tự tràn ra hai bên và độ dài tùy thuộc vào nội dung bên trong.

Căn lề - Margin/Padding
margin: auto/?px ?px ?px ?px căn lề bên ngoài cho box
padding: ?px ?px ?px ?px căn lề cho nội dung bên trong box

Chèn box nằm xen lẫn - Float
float: left/right/center/bottom đặt box nằm ở vị trí tương ứng trong văn bản

Hạn chế độ dài nội dung trong box - Overflow
overflow: auto/visible/hidden/scroll auto cũng là scroll, mặc định luôn là visible: dài quá khỏi chiều dài box thì content tự tràn ra khỏi box, hidden cắt bỏ luôn phần tràn khỏi box.

Tạm vậy...

 

Update thêm thuộc tính cho bài hướng dẫn code box bên trên, tiện thể gộp bài code div, style, gfont vào từ điển bbcode

Spoiler: div

Một kiểu box nâng cao, nhận 3 thứ là class, id và style cho 1 div. Style cũng bắt đầu bằng "background:".

HTML:

[div=class|id|style (nhớ là đã có background: ở trước)][/div]

Ví dụ:

HTML:

[div=abc mno|def|pink; width: 300px; height: 100px;]text[/div]

là

HTML:

<div class="abc mno" id="def" style="background:pink; width: 300px; height: 100px;">text</div>

text

Spoiler: style

a.k.a "cái loophole [hover]", không nhận dấu ngoặc kép ("), chỉ nhận dấu lược (')

phá css gốc của forum coi chừng bị tét đít

HTML:

[style]css[/style]

Ví dụ:

HTML:

[div=maustyle||]text[/div]

[style]
.maustyle {width: 400px; height: 400px; border: 1px solid purple;}
[/style]

text

Spoiler: gfont

Dùng để xài font trên https://fonts.google.com/. Sau khi chọn đủ các style muốn dùng, google sẽ cho 1 cục như sau với phần <link>:

HTML:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&family=Quicksand:wght@300&display=swap" rel="stylesheet">

Nếu không thấy hãy click vào nút ở góc trên bên phải

Spoiler

HTML:

[gfont]copy đoạn từ sau css2? tới trước &display=swap vào đây[/gfont]

Ví dụ:
Google ban ơn:

HTML:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&family=Quicksand:wght@300&display=swap" rel="stylesheet">

vậy ta sẽ cần family=PT+Sans&family=Quicksand:wght@300

HTML:

[gfont]family=PT+Sans&family=Quicksand:wght@300[/gfont]

[box=; font-family: 'PT Sans', sans-serif; font-size: 25px;]Abc Xyz[/box]

[box=; font-family: 'Quicksand', sans-serif; font-size: 25px;]Abc Xyz[/box]

Abc Xyz

Abc Xyz

Mọi câu hỏi xin gửi dzìa: https://vnsharing.vn/threads/424/

 

Ôi admin ơi, tui lội từ Wordpress qua nên bê code từ bển luôn (không am hiểu) có sửa đôi chút nên thay được font với color chữ, còn cái khung với nền ảnh không biết sao chỉnh cho hợp với forum bên mình.

Cái lệnh nó như này:

<div id="NEN-ANH" style="background: url('https://vitbauunu.files.wordpress.com/2021/08/8.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: #483d8b; text-align: justify; line-height: 1.5; word-break: break-word;">
<div id="NEN-MO" style="border: dotted #6495ED 2px; border-radius: 15px; background: rgba(255,255,255,0.888); padding: 3%;"> </div> </div>

Ad gợi ý cho mình được không?