tDsigns
ยินดีต้อนรับท่านเข้าสู่ tDsigns.com

ท่านกำลังเข้าใช้งานเว็บบอร์ดในสถานะ "ผู้มาเยือน" ซึ่งไม่สามารถที่จะตั้งคำถามหรือแสดงความคิดเห็นใดๆได้

ใช้เวลาเพียงเล็กน้อยสำหรับการสมัครสมาชิกเพื่อเข้าใช้งานที่ tDsigns แล้วท่านจะได้รับสิ่งดีดีกลับไป

tDsigns - Design by T ที่นี่เรามอบสิ่งดีดีให้คุณ..ด้วยใจ

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด

Go down

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Empty เทคนิคการใช้งาน BBCode ในเว็บบอร์ด

ตั้งหัวข้อ by TonyWins on Mon 06 Feb 2012, 04:59

BBCode คืออะไร?

BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม
( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง

#BBCode ในแต่ละเว็บบอร์ดอาจจะแตกต่างกันออกไป ทั้งนี้แล้วแต่ว่าผู้พัฒนาจะกำหนดแท็กของ BBCode ให้แทนภาษา HTML ในลักษณะไหน เช่น ถ้าเราต้องการจัดรูปภาพ หรือข้อความให้อยู่กึ่งกลาง เราอาจจะกำหนดแท็กดังนี้

Code:
[center]ข้อความ[/center]

หรือ

[center][img]ลิงก์รูปภาพ[/img][/center]

แต่ในบางเว็บบอร์ด เราอาจจะต้องกำหนดแท็กดังนี้ (หรือบางบอร์ดก็อาจจะไม่มีแท็ก Center ให้ใช้งาน)

Code:
[align=center]ข้อความ[/align]

หรือ

[align=center][img]ลิงก์รูปภาพ[/img][/align]

จากแท็ก BBCode ด้านบน เว็บบอร์ดจะนำไปแปลงเป็นภาษา HTML ได้ดังนี้

Code:
<center>ข้อความ</center>

หรือ

<center><img src="ลิงก์รูปภาพ" /></center>

และจะแสดงค่าออกมาดังนี้

ข้อความ

หรือ

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon


แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:09, ทั้งหมด 11 ครั้ง

__________________________________________________________________________________________________________________
ไม่จำเป็นต้องโพสต์ขอบคุณทุกครั้งไป เพราะ "คำขอบคุณ" ที่เกิดขึ้นแม้เพียงภายในจิตใจ นั่นคือคำขอบคุณที่แท้จริง
TonyWins
TonyWins
User
User

Male กุมภ์ ชวด
จำนวนข้อความ : 2832
คะแนนความดี : 12840
ชื่อเสียง : 97
วันที่เข้าร่วม : 18/07/2009
อายุ : 46
ที่อยู่ : กรุงเทพฯ

https://www.tdsigns.com

ขึ้นไปข้างบน Go down

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Empty การใช้งาน BBCode

ตั้งหัวข้อ by TonyWins on Mon 06 Feb 2012, 05:01

การใช้งาน BBCode

การทำอักษรตัวหนา

วิธีการใส่แท็ก
Code:
[b]ตามด้วยข้อความ[/b]

เช่น [b]ข้อความตัวหนา[/b]

ผลลัพธ์
ข้อความตัวหนา




การทำอักษรตัวเอียง

วิธีการใส่แท็ก
Code:
[i]ตามด้วยข้อความ[/i]

เช่น [i]ข้อความตัวเอียง[/i]

ผลลัพธ์
ข้อความตัวเอียง




การขีดเส้นใต้ข้อความ

วิธีการใส่แท็ก
Code:
[u]ตามด้วยข้อความ[/u]

เช่น [u]ข้อความขีดเส้นใต้[/u]

ผลลัพธ์
ข้อความขีดเส้นใต้




การขีดคร่อมข้อความ

วิธีการใส่แท็ก
Code:
[strike]ตามด้วยข้อความ[/strike]

เช่น [strike]ข้อความขีดคร่อม[/strike]

ผลลัพธ์
ข้อความขีดคร่อม




การจัดให้ข้อความหรือรูปภาพให้ชิดซ้าย (ปกติมันก็ชิดซ้ายอยู่แล้วนินา)

วิธีการใส่แท็ก
Code:
[left]ตามด้วยข้อความหรือแท็กรูปภาพ[/left]

เช่น [left]ข้อความชิดด้านซ้าย[/left]

หรือ [left][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/left]

ผลลัพธ์
ข้อความชิดด้านซ้าย

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon




การจัดให้ข้อความหรือรูปภาพอยู่กึ่งกลาง

วิธีการใส่แท็ก
Code:
[center]ตามด้วยข้อความหรือแท็กรูปภาพ[/center]

เช่น [center]ข้อความอยู่กึ่งกลาง[/center]

หรือ [center][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/center]

ผลลัพธ์
ข้อความอยู่กึ่งกลาง

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon




การจัดให้ข้อความหรือรูปภาพอยู่ชิดขวา

วิธีการใส่แท็ก
Code:
[right]ตามด้วยข้อความหรือแท็กรูปภาพ[/right]

เช่น [right]ข้อความชิดขวา[/right]

หรือ [right][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/right]

ผลลัพธ์
ข้อความชิดขวา

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon




การจัดให้ข้อความเสมอกันทั้งด้านหน้าและด้านหลัง

วิธีการใส่แท็ก
Code:
[justify]ตามด้วยข้อความ[/justify]

เช่น [justify]BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม ( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง[/justify]

ผลลัพธ์
BBCode มาจากคำว่า Bulletin Board Code เป็นภาษา Markup แบบย่อที่ถูกนำมาใช้เพื่อจัดรูปแบบการแสดงผลในเว็บบอร์ด โดยจะใช้แท็ก (Tag) ในวงเล็บรูปสี่เหลี่ยม ( [ ] ) ซึ่งแท็กต่างๆในเว็บบอร์ดจะถูกเขียนขึ้นมาเพื่อแทนภาษา HTML โดยมันจะถูกวิเคราะห์ด้วยระบบของเว็บบอร์ด และแปลงไปเป็นภาษา HTML เพื่อให้เบราเซอร์เข้าใจและสามารถแสดงผลออกมาได้อย่างถูกต้อง



การจัดรายการข้อความแบบใส่เครื่องหมายจุดไว้ที่หน้าข้อความ

วิธีการใส่แท็ก
Code:
[list][*]ตามด้วยข้อความ[/list]

เช่น [list][*]ข้อความ
[*]ข้อความ
[*]ข้อความ[/list]

ผลลัพธ์

  • ข้อความ
  • ข้อความ
  • ข้อความ





การจัดรายการข้อความแบบใส่ตัวเลขไว้ที่หน้าข้อความ

วิธีการใส่แท็ก
Code:
[list=1][*]ตามด้วยข้อความ[/list]

เช่น [list=1][*]ข้อความ
[*]ข้อความ
[*]ข้อความ
[*]ข้อความ[/list]

ผลลัพธ์

  1. ข้อความ
  2. ข้อความ
  3. ข้อความ





การใส่เส้นคั่นแนวนอน

วิธีการใส่แท็ก
Code:
ข้อความ
[hr]
ข้อความ

ผลลัพธ์
ข้อความ


ข้อความ




การสร้างตาราง

วิธีการใส่แท็ก
Code:
[table border="ค่าความหนาของเส้นตาราง" (0 = ไม่มีเส้น) width="ความกว้างของตาราง"]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr][/table]

เช่น [table border="1" width="50%"][tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr]
[tr][td]ข้อความ[/td][td]ข้อความ[/td][td]ข้อความ[/td][/tr][/table]

ผลลัพธ์
ข้อความข้อความข้อความ
ข้อความข้อความข้อความ
ข้อความข้อความข้อความ



การกำหนดข้อความแบบข้อความอ้างอิง

วิธีการใส่แท็ก
Code:
[quote]ตามด้วยข้อความ[/quote] หรือ [quote="ชื่อผู้ใช้ หรือ ข้อความ"]ตามด้วยข้อความ[/quote]

เช่น [quote]ข้อความอ้างอิง[/quote]
[quote="tDsigns"]ที่นี่เรามอบสิ่งดีดีให้คุณ...ด้วยใจ[/quote]

ผลลัพธ์
ข้อความอ้างอิง
tDsigns พิมพ์ว่า:ที่นี่เรามอบสิ่งดีดีให้คุณ...ด้วยใจ




การกำหนดข้อความเพื่อแสดงผลแบบโค้ด (ใช้สำหรับแสดงผลโค้ด HTML หรือ BBCode เป็นต้น)

วิธีการใส่แท็ก
Code:
[code]ตามด้วยข้อความ, โค้ด HTML, BBCode, โค้ด Java[/code]

เช่น [code]<b>ข้อความตัวหนา</b> [i]ข้อความตัวเอียง[/i][/code]

ผลลัพธ์
Code:
<b>ข้อความตัวหนา</b> [i]ข้อความตัวเอียง[/i]




การใส่รูปภาพ

วิธีการใส่แท็ก
Code:
[img]ลิงก์รูปภาพ[/img]

เช่น [img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img]

ผลลัพธ์:
เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon




การใส่ลิงก์ URL

วิธีการใส่แท็ก
Code:
[url=ตามด้วยลิงก์ URL]ข้อความหรือคำอธิบาย[/url]

เช่น [url=https://www.tdsigns.com/forum]tDsigns Forum[/url]

ผลลัพธ์




การใส่ Flash Animation

วิธีการใส่แท็ก
Code:
[flash(ความกว้าง,ความสูง)]Flash URL[/flash]

เช่น [flash(480,50)]http://www.123-banner.com/preview/p_turns.swf[/flash]

ผลลัพธ์




การใส่วิดีโอจาก Youtube

ถ้า URL ของวิดีโอคือ https://www.youtube.com/watch?v=a69dgQWyJtY รหัสของวิดีโอจะอยู่ด้านหลังเครื่องหมาย = จะได้เป็น a69dgQWyJtY หรือจะใช้วิธีใส่แท็ก Flash Animation ด้วย URL เต็มก็ได้ ซึ่งจะสามารถกำหนดขนาดของวิดีโอได้ด้วย โดยจะต้องแก้ไข URL ด้วยการลบคำว่า watch? ทิ้งไป และแทนที่เครื่องหมาย = ด้วยเครื่องหมาย /

วิธีการใส่แท็ก
Code:
[youtube]รหัสวิดีโอของ Youtube[/youtube]

เช่น

[youtube]a69dgQWyJtY[/youtube]

ผลลัพธ์







การกำหนดหัวข้อ (Header)

วิธีการใส่แท็ก
Code:
[hตัวเลข2-4]ข้อความ[/hตัวเลขที่เหมือนกับแท็กเริ่มต้น]

เช่น

[h2]หัวข้อขนาด H2[/h2]
[h3]หัวข้อขนาด H3[/h3]
[h4]หัวข้อขนาด H4[/h4]

ผลลัพธ์

หัวข้อขนาด H2





หัวข้อขนาด H3





หัวข้อขนาด H4






การกำหนดขนาดอักษร

วิธีการใส่แท็ก
Code:
[size=ตัวเลข]ข้อความ[/size]

เช่น [size=7]ข้อความ[/size] หรือ [size=9]ข้อความ[/size] หรือ [size=12]ข้อความ[/size] หรือ [size=18]ข้อความ[/size] หรือ [size=24]ข้อความ[/size]

ผลลัพธ์
ข้อความ ข้อความ ข้อความ ข้อความ ข้อความ




การใส่สีให้กับตัวอักษร

วิธีการใส่แท็ก
Code:
[color=รหัสสีหรือชื่อสีมาตราฐาน]ข้อความ[/color]

เช่น [color=#22bb99]ข้อความ[/color] หรือ [color=red]ข้อความ[/color]

ผลลัพธ์
ข้อความ ข้อความ

รายชื่อสีมาตราฐาน 140 สี
เทคนิคการใช้งาน BBCode ในเว็บบอร์ด 140%2BWeb%2BColor%2BChart

ดาวน์โหลดไฟล์รูปแบบ PDF: 140 Web Colors by tDsigns.com




การกำหนดรูปแบบของตัวอักษร

วิธีการใส่แท็ก
Code:
[font=ชื่อแบบอักษร]ข้อความ[/font]

เช่น [font=Arial]Arial[/font] หรือ [font=Arial Black]Arial Black[/font] หรือ [font=Comic Sans Ms]Comic Sans Ms[/font] หรือ [font=Impact]Impact[/font]

ผลลัพธ์
Arial Arial Black Comic Sans Ms Impact




การแสดงผลข้อความแบบตัวพ่วงท้าย

วิธีการใส่แท็ก
Code:
[sub]ข้อความ[/sub]

เช่น ไฮโดรเจนโมโนออกไซด์ หรือ น้ำ (H[sub]2[/sub]O)

ผลลัพธ์
ไฮโดรเจนโมโนออกไซด์ หรือน้ำ (H2O)




การแสดงผลข้อความแบบตัวยกระดับ

วิธีการใส่แท็ก
Code:
[sup]ข้อความ[/sup]

เช่น x = 10[sup]2[/sup]

ผลลัพธ์
x = 102




การใส่ข้อความใน Spoiler

วิธีการใส่แท็ก
Code:
[spoiler]ข้อความ[/spoiler]

เช่น [spoiler]Password: tDsigns[/spoiler]

ผลลัพธ์
Spoiler:
Password: tDsigns




การกำหนดให้ข้อความเลื่อนในแนวนอน

วิธีการใส่แท็ก
Code:
[scroll]ข้อความ[/scroll]

เช่น [scroll]ข้อความเลื่อนในแนวนอน[/scroll]

ผลลัพธ์
ข้อความเลื่อนในแนวนอน




การกำหนดให้ข้อความเลื่อนในแนวตั้ง

วิธีการใส่แท็ก
Code:
[updown]ข้อความ[/updown]

เช่น [updown]ข้อความเลื่อนในแนวตั้ง[/ubdown]

ผลลัพธ์
ข้อความเลื่อนในแนวตั้ง




การสุ่มตัวเลข

วิธีการใส่แท็ก
Code:
[rand]จำนวนตัวเลข[/rand]

หรือ [rand]ตัวเลขเริ่มต้น,ตัวเลขสิ้นสุด[/rand]

เช่น [rand]50[/rand] หรือ [rand]20,90[/rand]

ผลลัพธ์
Random number (1,50) : 39
Random number (20,90) : 83


แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:37, ทั้งหมด 21 ครั้ง

__________________________________________________________________________________________________________________
ไม่จำเป็นต้องโพสต์ขอบคุณทุกครั้งไป เพราะ "คำขอบคุณ" ที่เกิดขึ้นแม้เพียงภายในจิตใจ นั่นคือคำขอบคุณที่แท้จริง
TonyWins
TonyWins
User
User

Male กุมภ์ ชวด
จำนวนข้อความ : 2832
คะแนนความดี : 12840
ชื่อเสียง : 97
วันที่เข้าร่วม : 18/07/2009
อายุ : 46
ที่อยู่ : กรุงเทพฯ

https://www.tdsigns.com

ขึ้นไปข้างบน Go down

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Empty การใช้แท็ก BBCode แบบผสม

ตั้งหัวข้อ by TonyWins on Mon 06 Feb 2012, 17:26

การใช้แท็ก BBCode แบบผสม

การใส่แท็กให้กับข้อความเช่น ตัวหนา+เอียง ตัวเอียง+ขีดเส้นใต้ ตัวหนา+เอียง+จัดไว้กึ่งกลาง เป็นต้น

วิธีการใส่แท็ก ให้ใส่แท็กเปิดเรียงตามลำดับ และใส่แท็กปิดเรียงย้อนกลับไปตามลำดับ
Code:
เช่น [b][i]ตัวหนา+เอียง[/i][/b]
[i][u]ตัวเอียง+ขีดเส้นใต้[/u][/i]
[b][i][center]ตัวหนา+เอียง+จัดกึ่งกลาง[/center][/i][/b]

ผลลัพธ์
ตัวหนา+เอียง
ตัวเอียง+ขีดเส้นใต้
ตัวหนา+เอียง+จัดกึ่งกลาง





การกำหนดลิงก์ให้กับรูปภาพ

วิธีการใส่แท็ก
Code:
[url=URL ของเว็บ][img]URL ของรูปภาพ[/img][/url]

เช่น [url=https://www.tdsigns.com/forum][img]https://lh3.googleusercontent.com/-Jv2w4WUW2DE/VjVZPyNu0-I/AAAAAAAASWo/yI3o7ywbe_k/s200-Ic42/Avatar%252520%252526%252520Icon.png[/img][/url]

ผลลัพธ์
เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Avatar%252520%252526%252520Icon


แก้ไขล่าสุดโดย TonyWins เมื่อ Thu 20 Jul 2017, 15:45, ทั้งหมด 7 ครั้ง

__________________________________________________________________________________________________________________
ไม่จำเป็นต้องโพสต์ขอบคุณทุกครั้งไป เพราะ "คำขอบคุณ" ที่เกิดขึ้นแม้เพียงภายในจิตใจ นั่นคือคำขอบคุณที่แท้จริง
TonyWins
TonyWins
User
User

Male กุมภ์ ชวด
จำนวนข้อความ : 2832
คะแนนความดี : 12840
ชื่อเสียง : 97
วันที่เข้าร่วม : 18/07/2009
อายุ : 46
ที่อยู่ : กรุงเทพฯ

https://www.tdsigns.com

ขึ้นไปข้างบน Go down

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Empty Re: เทคนิคการใช้งาน BBCode ในเว็บบอร์ด

ตั้งหัวข้อ by TonyWins on Mon 06 Feb 2012, 17:52

การแสดงผลรูปภาพขนาดใหญ่

การแสดงผลรูปภาพในเว็บบอร์ด tDsigns ความกว้างที่เหมาะสมไม่ควรที่จะเกิน 1024 pixels (สำหรับหน้าจอที่มีความละเอียด 1600 x 900) ซึ่งถ้าภาพต้นฉบับมีขนาดใหญ่เกิน 1024 pixels เวลาแสดงผลมันจะเกินเนื้อที่การแสดงข้อมูลบนเว็บบอร์ด ซึ่งทำให้แสดงองค์ประกอบของภาพได้ไม่ครบ เช่นภาพด้านล่าง

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด 2015-09-17_00004

ดังนั้นการนำรูปภาพมาใช้งานในเว็บบอร์ดควรที่จะย่อขนาดของภาพลงมาก่อนอัปโหลด (สำหรับเว็บฝากไฟล์ทั่วไป ซึ่งผมไม่ค่อยแนะนำให้ฝากไฟล์ภาพเอาไว้ตามเว็บเหล่านี้) แล้วถึงจะนำลิงก์ของไฟล์รูปภาพมาใช้งาน

แต่ถ้าเราเป็นสมาชิกของ Picasa Web Album ก็สามารถอัปโหลดไฟล์รูปภาพขนาดใหญ่ขึ้นไปได้ทันทีโดยไม่จำเป็นต้องลดขนาดภาพก่อน และสามารถที่จะนำภาพจาก Picasa มาใช้ได้ง่ายๆ กับเว็บบอร์ด โดยสามารถกำหนดขนาดของการแสดงผลได้ตามต้องการ




Picasa Web Album คืออะไร?

Picasa Web Album เป็นพื้นที่จัดเก็บไฟล์รูปภาพส่วนตัวสำหรับผู้ที่มีแอคเคาท์ของ Google โดยมันจะลิงก์กับ Google+ ในการใช้เป็นที่จัดเก็บรูปภาพที่เราแชร์ รวมไปถึงการซิงค์ข้อมูลรูปภาพกับมือถือระบบปฏิบัติการแอนดรอยด์ มีเนื้อที่สำหรับจัดเก็บรูปภาพได้ฟรีถึง 1.5GB นอกจากนี้ยังมีโปรแกรมจัดการไฟล์รูปภาพที่สนับสนุนการทำงานที่สามารถค้นหา จัดระเบียบ และแบ่งปันรูปภาพ และอัปโหลดไปยัง Picasa Web Albumได้ทันทีโดยไม่ต้องเปิดหน้าเว็บด้วย Picasa สามารถดาวน์โหลดได้ที่ picasa.google.com




การนำภาพจาก Picasa มาใช้งาน

หลังจากที่อัปโหลดภาพไว้ที่ Picasa แล้วให้คลิกเข้าไปดูภาพที่ต้องการนำมาใช้งาน ที่ด้านขวาจะแสดงรายละเอียดของภาพขนาดปกติเอาไว้ ดังภาพตัวอย่างขนาดปกติของภาพจะมีความละเอียดอยู่ที่ 1600x900 pixels ส่วนภาพที่แสดงผลในหน้าเว็บจะขึ้นอยู่กับความละเอียดของหน้าจอ เช่นถ้าหน้าจอของเรามีความละเอียด 1600x900 pixels ภาพที่แสดงผลในหน้าเว็บของ Picasa จะแสดงผลอยู่ที่ 912x513 pixels เป็นต้น (ขนาดการแสดงผลจะแตกต่างกันไปตามขนาดและสัดส่วนของภาพ)

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Psw01

การนำภาพมาใช้งาน ให้คลิกขวาที่ภาพแล้วเลือกคำสั่ง Copy Picture (สำหรับ Microsoft Edge) หรือ Copy Image URL (สำหรับ Chrome)

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด Psw02

นำโค้ดที่ได้มาใส่ในแท็ก img ดังนี้
Code:
[img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s912-Ic42/2015-09-17_00004.jpg[/img]

จากโค้ดให้สังเกตที่ URL ของภาพโดยดูจากชื่อไฟล์ด้านขวาไล่ย้อนไปจนเห็นตัวเลขที่มีตัว S นำหน้า ค่าตัวเลขหลังตัว S จะเป็นตัวกำหนดการแสดงผลของภาพ เช่นถ้าเราต้องการกำหนดให้ภาพมีความกว้าง 1024 ก็เปลี่ยนตัวเลขจาก s912 ไปเป็น s1024 ดังโค้ดด้านล่าง
Code:
[img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1024-Ic42/2015-09-17_00004.jpg[/img]

ผลลัพธ์

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด 2015-09-17_00004
ภาพขนาด s912

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด 2015-09-17_00004
ภาพขนาด s1024

ในกรณีที่เราต้องการแสดงภาพขนาดใหญ่ให้ใช้วิธีใส่แท็ก URL นำหน้าแท็ก img แล้วกำหนดขนาดของรูปภาพของแท็ก URL เป็นภาพขนาดใหญ่ และแท็ก img กำหนดขนาดให้เหมาะสมกับการแสดงผลในเว็บบอร์ด เช่น

Code:
[url=https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1600-Ic42/2015-09-17_00004.jpg][img]https://lh3.googleusercontent.com/-ZYHESwJvDBc/VjWeJgvwawI/AAAAAAAASW4/kzqa_DWXpG0/s1024-Ic42/2015-09-17_00004.jpg[/img][/url]
คลิกเพื่อดูภาพขนาดใหญ่

ผลลัพธ์

เทคนิคการใช้งาน BBCode ในเว็บบอร์ด 2015-09-17_00004
คลิกเพื่อดูภาพขนาดใหญ่

__________________________________________________________________________________________________________________
ไม่จำเป็นต้องโพสต์ขอบคุณทุกครั้งไป เพราะ "คำขอบคุณ" ที่เกิดขึ้นแม้เพียงภายในจิตใจ นั่นคือคำขอบคุณที่แท้จริง
TonyWins
TonyWins
User
User

Male กุมภ์ ชวด
จำนวนข้อความ : 2832
คะแนนความดี : 12840
ชื่อเสียง : 97
วันที่เข้าร่วม : 18/07/2009
อายุ : 46
ที่อยู่ : กรุงเทพฯ

https://www.tdsigns.com

ขึ้นไปข้างบน Go down

ขึ้นไปข้างบน


 
Permissions in this forum:
คุณไม่สามารถพิมพ์ตอบ