คุณตกหลุกรักใครอยู่, พิสูจน์ดู...

ถ้าหากคุณออกมาจากงานเลี้ยงที่วุ่นวาย
และอยากเดินกับเค้า 2 คน
.....คุณตกหลุมรักเค้า

พอคุณอยู่กับเค้า คุณแกล้งทำเป็นไม่สนใจ
แต่พอเค้าไม่อยู่ คุณก็มองหา
.....คุณตกหลุมรักเค้า

แม้จะมีคนอื่นที่ทำให้คุณหัวเราะอยู่
สายตาคุณก็มองอยู่ที่เค้า
.....คุณตกหลุมรักเค้า

พอดูรูปหมู่ คุณมองหาเค้า
(ดูว่าใครอยู่ข้างเค้า , ดูว่าเค้า เป็นไง)
.....คุณตกหลุมรักเค้า

คุณต้องเอาหูโทรศัพท์ออก เพราะเรียนหนัก
แต่ทำไม่ได้ถ้าหากเค้า จะโทรมา
.....คุณตกหลุมรักเค้า

ถ้าคุณตื่นเต้นกับอีเมลสั้น ๆ ที่เค้า ส่งมา
มากกว่าอีเมลของคนอื่นละก็
.....คุณตกหลุมรักเค้า

ต้องคอยบอกตัวเองว่า " เค้า เป็นแค่เพื่อน "
แต่ก็รู้ดีว่า ห้ามตัวเองที่จะคิดถึงเค้า ไม่ได้
.....คุณตกหลุมรักเค้า

และถ้าคุณอ่านข้อความนี้
แล้วมีใครผ่านเข้ามาในความคิด
....คุณตกหลุมรักเค้า

...ฮั่นแน่...คิดถึงใครกันอยู่เหรอ.....อิอิ

10 จุดต้อง ( ห้าม ) จับของสาวๆ

10 จุดต้อง ( ห้าม ) จับของสาวๆ  ถ้าผู้ชายอ่านให้เอาในวงเล็บออกก่อน

1.ฝ่ามือ  ไม่ว่าจะจับหรือเขี่ย
2.หู  ไม่ว่าจะจับ เป่าหรือแม้กระทั่ง.......เอานิ้วจิ้ม
3.แก้ม อย่าคิดแม้จะลูบ ไล้ หรือสัก 1 ฟอด  แต่ถ้ามันลูบมากๆก้อถามมันว่า  จะลูบหา....
4.ผม ไอพวกผู้ชายที่ชอบจับผมก่อน  มันจะค่อยๆลามจน.......บางทีมันอาจกระชากผมสาวๆด้วยความมันมือก้อด้าย
5. (ต้น)คอ  ไม่ว่าจะลูบจะไล้จะไซร้ ห้าม
6.แผ่นหลัง ไม่ว่าจะเกาหรือเขี่ย ห้าม ( มีคนถามว่า แล้วเอาน้ำแข็งลูบได้ป่ะ  อันนี้แล้วแต่จะคิดไมได้ห้าม )
7.Milks.....ใส่sด้วยเพราะว่ามี 2 ข้าง  อย่าแม้แต่มอง....แต่(แอบ)มองได้
8.ขา(รวมไปถึงต้นขา) เพราะดีไม่ดีสาวเจ้าอาจจะถวายแข้งให้ก้อด้าย  ( มีสาวๆถามว่า เขาไม่จับธรรมดา  เขาลูบด้วยหนู๋ควรจะห้ามเขาป่ะ  ขอตอบว่าถ้าอยากเสีย.....ก้อมิต้องห้าม )
9.ก้น  ของตายอยู่แล้ว ถ้ามันจับก้อแจกสักฉาดใหญ่ๆ  ( แต่มีมันบางตัวถวายแข้งสวนกลับมาก้อตัวครัยตัวมัน )
10.โอโบ๊ะจาม๊ะนั่นเอง  แน่นอน  โดนเป็นเสร็จ มันจะไม่จับอย่างเดียว   มันอาจจะชักดาบออกมาฟาดฟันให้สาวๆสูญเสียเอกราช

ทัสมาฮาล...อนุสรณ์แห่งความรัก

ขอต้อนรับสู่หัวข้อใหม่ของ web ความรัก คือ รักนี้มีตำนาน สำหรับบท ความแรกขอ เสนอเรื่องราวของ อนุสรณ์สถานอันเป็นสัญญลักษณ์ของ ความรัก นั้นคือ ทัสมาฮาล ด้วยความงามจากหินอ่อนและ สถาปัตยกรรมที่วิจิตร ตั้งบนฝั่งแม่น้ำยมนา ณ เมืองอัคราทางตอนเหนือ ของประเทศอินเดีย อันเกิดจากชายผู้ หนึ่งซึ่งเป็นถึงองค์จักรพรรดิองค์ที่ 5 แห่งราชวงศ์โมกุล พระนามว่า ชาร์ จาฮาล ทรงสร้างเพื่อรำลึกถึง พระมเหสีองค์ที่ 2 ของพระองค์ พระนางมุมตัส มาฮาล อันมีกำเนิดเป็น หญิงสูงศักดิ์ชาวเปอร์ เซีย ซึ่ง
สิ้นพระชนม์ลงภายหลังประสูติพระโอรส องค์ที่ 14 ในขณะที่ทรงร่วมกับพระสวามีต่อต้านข้าศึก ที่เข้ามารุกราน ณ เมือง เบอร์แฮนเพอร์ เล่ากันมา การสิ้นพระชนม์ของพระนาง ทำให้ชาร์ จาฮาล โศก เศร้าเสียใจเป็นอันมา จนทำให้พระเกศาของพระองค์ ขาวโพลนในเวลาเพียงไม่กี่เดือนหลังจากนั้น  

ความวิจิตรตระการตาของ ทัส มาฮาล ต้องใช้เวลาในการก่อสร้างนานถึง 22 ปี แต่ผลสุดท้าย ชาร์ จาฮาล ก็ได้แต่เพียงยลโฉมความงามของทัส มาฮาล ผ่านช่องหน้าต่างในคุกเท่านั้น ณ ป้อมเมืองอัคราเท่านั้น

เมื่อครั้งแรกพบ พระนางมุมตัส มาฮาล หรือในพระนามเดิมว่า อาจูมานด์ บานู กำลังขายเครื่องประดับใน เทศกาลออกร้านครั้งหนึ่งอันถือเป็นขนบ ธรรมเนียมประเพณีที่เปิดโอกาสให้หญิงสูงศักดิ์มาขายเครื่องประดับเล็กๆ น้อยๆแก่ชายหนุ่มสูงศักดิ์ด้วยราคาที่แพงลิบลิ่วเพียงเพื่อให้ทั้งคู่ได้สานทอ สายใยแห่งรัก จนถึงขั้นหมั้นหมายและแต่งงานกัน

หลังจากการพบกันครั้งแรก จนก่อให้เกิดพระราชพิธีอภิเษกสมรสขึ้นใน วันที่ 30 เมษายน 1612 ชาว เมืองอัครเข้าร่วมเฉลิมฉลองในพิธีอย่าง โดยความปิติยินดีต่อองค์จักรพรรดิ เจ้าสาว พระชนมายุเพียง 19 ชันษา ได้รับพระราชทานพระนามใหม่เป็นพระนางมุมตัส มาฮาล อันเป็นชื่อวังแห่งหนึ่งขององค์จักรพรรดิ

ขณะที่พระนางมุมตัส มาฮาลดำรงพระชนม์ชีพอยู่นั้น ได้เคยขอสัญญาจาก ชาร์ จาฮาล ไว้ 4 ข้อ หาก พระนางสิ้นพระชนม์ลง คือ 1.ต้องสร้างทัสมาฮาลเป็นสุสานของพระนาง 2.ให้องค์จักรพรรดิ์อภิเษกสมรสอีกครั้ง 3.องค์จักรพรรดิควรมีราชกรุณาต่อเด็กๆ 4.ต้องเสด็จราชดำเนินไปยังทัส มาฮาลอันเป็นที่ ฝั่งศพของพระนางทุกๆปี

ภายหลังจากที่พระนางมุมตัสสิ้นพระชนม์ลง ชาร์ จาฮาล ทรงกระทบ กระเทือนพระทัยอย่างมาก ถึงกับงดการว่าราชการ ไม่ฉลองพระองค์ เยี่ยงกษัตริย์ เสวยอาหารพื้นๆและไม่ฟังดนตรี พระองค์ทรงเอาแต่กันแสง เส้นพระเกศาหงอกขาวอย่างรวดเร็ว ทรงเลิกเป็นผู้นำทัพไปปกป้องชาย แดน เอาแต่ประทับอยู่ในวัง มอบหมายให้ข้าราชบริพารไปทำกันหมด ความโศกเศร้าต่อการจากไปของนางอันเป็ที่รักกินเวลานานถึง 2 ปี

หลังจากนั้นพระองค์ทรงปฎิบัติตามสัญญาทรงก่อสร้าง ทัสมาฮาลในปี 1631 การก่อสร้างใช้เวลานานถึง 22 ปี ใช้คนงานและช่างฝีมือเกือบ 20,000 คน มีการขนหินอ่อนสีขาวจากเมืองโชตบุระ ที่ไกลประมาณ 100 ไมล์ นอกจากนี้ยังมีอัญมณีมีค่าประดับประดาสุสาน ตั้งแต่หินลายสีฟ้าจาก ลังกา หินสีเขียวจากรัส เซีย หินโมราจากกรุงแบกแดดและพลอยจาก ทิเบต ยังต้องใช้ช้างนับพันตัวเพื่อขนย้ายวัสดุอุปกณ์เหล่านี้
เข้ามา ทัสมาฮาลถือเป็นผลงานการออกแบบขั้นเอกอุจากสถาปนิกชาวอินหร่าน นามว่า อิทัส อูซา และ นอกจากความงามของสถาปัตยกรรมแล้ว สิ่งที่เสริมความงามของทัส มาฮาล นั้นก็คือ การเป็น "สัญญลักษณ์ของความรักชั่วนิรันดร์"

ทัส มาฮาล และสิ่งก่อสร้างรายล้อมแล้วเสร็จในปี 1652 เมื่อผู้มาเยี่ยมชมเดินผ่านความมืดออกจาก ซุ้มประตูโค้ง ก็จะเห็นสถาปัตยกรรมหินอ่อนสีขาว ผุดผ่องเป็นสิ่งก่อสร้างที่ได้สัดส่วนกลมกลืนกันอย่าง เหมาะเจาะ สายตาจะถูกชี้นำด้วยทางน้ำที่เป็นเส้น ตรงเพื่อให้พื้นที่ในระดับสายตาซึ่งเป็นที่ตั้งของสิ่ง ก่อสร้าง อันมีฐานรองรับเป็นหินทรายและหินอ่อน เบื้องบนเป็นโดมกลมชูยอดแหลมเสียดฟ้า รายล้อม ด้วยหอคอยยอดกลมตั้งขนาบตรงมุมทั้ง 4 ทิศ

ความงดงามของหินอ่อนสีขาวยามสะท้องแสงแดด ทั้งในอรุณรุ่งและ สายัณห์จะค่อยๆเปลี่ยนสีผิวของสิ่ง ก่อสร้างนั้นเป็นสีม่วง สีแดงกุหลาบ และสีทอง ท่ามกลางละอองหมอกในตอนเช้า สิ่งก่อสร้างดูเหมือน วิมานในหมู่เมฆ ราวกับกลุ่มละอองหมอกก่อรูปขึ้นมาให้กลมกลืนประดุจ เป็นองค์ประกอบเดียวกัน ยิ่งกว่านั้น ความตระหง่านทะมึนใต้แสงจันทร์ เต็มดวงของทัชมาฮาลดูสง่า เมื่อแสงที่สะท้อนจากตัวโดม เปล่งรัศมีดุจ ไอน้ำอีกทั้งยังสะท้อนแสงกระเพื่อมของน้ำจากสระรูปวงรี

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

ถึงแม้ ชาร์ จาฮาล ปฎิบัติตามสัญญาได้ทั้ง 3 ข้อ แต่ในข้อสุดท้ายนั้น พระองค์ไม่อาจปฎิบัติได้ เพราะว่า ในปี 1658 พระราชโอรสพระองค์หนึ่งของพระองค์ นามว่า ออรังเซบ ไม่อาจเห็นการใช้จ่ายเงินอย่าง ฟุ่มเฟือย อันก่อให้เกิดความเดือนร้อนต่ออาณาประชาราษฎร์ จึงทรงก่อการปฎิวัติแล้วจับองค์ ขาร์ จาฮาล คุมขังในป้อมเมืองอัครา ชาร์ จาฮาล จากที่เคยมีความสุขจากทรพัย์ศฤงคารมากเหลือคณานับ สุดท้าย บั้นปลายพระชนม์ชีพของพระองค์ ต้องประทับในที่คุมขังเป็นเวลานานถึง 8 ปี และสิ้นพระชนม์ลงในปี
1666 พระองค์ทรงได้แต่เพียงเขย่งพระบาทเกาะช่องหน้าต่างลูกกรงเหล็ก ทอดพระเนตรไปยังฝั่งตรง ข้ามของแม่น้ำยมนา เฝ้ามองสุสานของพระนางอันเป็นที่รัก ในที่สุดเมื่อองค์ ชาร์ จาฮาล สิ้นพระชนม์ลง พระศพของพระองค์ได้ถูกนำไปฝังเคียงข้างพระนางมุมตัส ภายใต้โดมหินอ่อนอันเป็นอนุสรณ์แห่งความ รัก นามว่า "ทัส มาฮาล"

50 เรื่องโรแมนติค เพื่อทำกับ แฟน

1. ดูพระอาทิดตกดินด้วยกัน
2. กระซิบถึงกันและกัน
3. ทำอาหารให้กัน
4. เดินท่ามกลางฝนตก
5. จับมือ
6. ซื้อของขวัญให้กัน
7. ดอกกุหลาบ
8. ถามว่าน้ำหอมสุดโปรดคือกลิ่นไหน และใช้ทุกครั้งที่อยู่ด้วยกัน
9. เดินริมทะเลตอนเที่ยงคืนด้วยกัน
10. เขียนกลอนให้กัน
11. การกอดคือยาที่ดีที่สุด
12. พูดว่า"รักเทอ" ตอนที่รู้สึกว่ารักจิงๆ
และทำให้เค้ารู้ว่าเรารู้สึกรักจิงๆ
13. ให้ของขวัญเล็กๆ ดอกไม้/ลูกอม/กลอน
14. บอกเทอ/เขา ว่าเทอ/เขา คือผู้หญิง/ผู้ชายที่คุณต้องการมากที่สุด
15. อยู่ด้วยกันให้มากที่สุดเท่าที่จะทำได้
16. มองตากันและกัน.
17. (เฉพาะผู้ชาย) ดันคางเทอขึ้นเบาๆ มองตาเทอ
บอกว่ารักเทอมากที่สุด และจูบเทอเบาๆ "เบาๆ" ล่ะ
18. ในที่สาธารนะชน แค่จีบกันเฉยๆ อย่าทำอย่างอื่น
19. ใส่จดหมายรักในกระเป๋าเขา/เทอ เมื่อเทอ/เขาไม่เห็น
20. ซื้อแหวนให้เทอ(เฉพาะผู้ชาย)
21. ร้องเพลงให้กันและกัน
22. (เฉพาะผู้ชาย) โอบกอดเทอตรงสะโพกเสมอ
23. พาไปกินข้าว2ต่อ2
24. กินสปาเก็ตตี้ (เคยดูเรื่องทรามวัยกับไอ้ตูบมั๊ย)
25. (เฉพาะผู้ชาย)จับมือเทอ มองตาเทอ จูบมือเทอแล้ววางไว้บนหัวใจ
26. เต้นด้วยกัน
27. (เฉพาะผู้หญิง) เวลาอยู่ด้วยกัน นอนตักเขา
28. ทำเรื่องน่ารักๆ เช่น เขียนว่า "ฉันรักเทอ" ในโน๊ต
29. หาเรื่องมาเรียกเทอ/เขา ทุกๆ5นาที
30. ไม่ว่าจะยุ่งขนาดไหน โทรไปหาเขา/เทอ และบอกว่า"ฉันรักเทอ"
31. โทรจากสถานที่ๆคุณไปเที่ยวและบอกว่าคุณคิดถึงเขา/เทอ เสมอ
32. จำฝันของคุณและเล่าให้เขา/เทอ ฟัง
34. บอกความกลัวและความลับสุดยอดของคุณให้เทอ/เขา ฟัง
35. ทำดีกับพ่อแม่ของเทอ/เขา
36. (เฉพาะผู้ชาย) ลูบผมออกจากใบหน้าของเทอเบาๆ "เบาๆ" ล่ะ
37. ไปเที่ยวกับเพื่อนของเทอ/เขา
38. ไปวัด/อทิฐาน/สาบาน ด้วยกัน
39. พาไปดูหนังโรแมนติคและจำส่วนที่เทอ/เขาชอบ
40. เรียนรู้กันและกัน และอย่าทำผิดแบบเดิมเกิน2ครั้ง
41. บอกว่าคุณรู้สึกดียังงัยที่ได้อยู่กับเทอ/เขา
42. เสียสละให้กันและกัน
43. รักกันมากๆ ถ้าไม่อย่างนั้นก้อเลิกกันไปเลย
44. ทำให้ไม่มีนาทีไหนที่คุณไม่คิดถึงเขา/เทอ
45. รักตัวเองก่อนที่จะไปรักใคร
46. หัดพูดคำหวานๆในภาษาอื่น
47. ขอเพลงให้เขา/เทอ ในวิทยุ
48. หลับคาโทสับด้วยกัน
49. ปกป้องเทอ/เขา เมื่อคนอื่นพูดอะไรไม่ดีต่อเขา/เทอ
50. ห้ามลืมการจูบgood night และพูดว่า"ฝันดีนะ" เสมอ

ข้อคิดดีๆ จากยางลบ

สมัยเด็กๆ ครูสอนศิลปะท่านหนึ่งสอนฉันเสมอว่า
เวลาเราใช้ดินสอวาดภาพ เราห้ามใช้ยางลบ
ตอนนั้น ฉันไม่เข้าใจจุดประสงค์ของครูสักท่าไหร่
รู้แต่เพียงว่าเวลาฉันวาดภาพแล้วเส้นมันบิดเบี้ยว 
ฉันก็อยากจะให้มันตรงสวย แต่ทุกครั้งที่ฉันหยิบยางลบขึ้นมาเพื่อจะลบภาพนั้น
ครูของฉันก็จะเตือนถึงกติกานั้นเสมอ
สุดท้ายฉันจึงเลือกใช้วิธีต่อเติมภาพๆนั้นไปตามจินตนาการ
เช่นถ้าฉันตั่งใจวาดรูปหน้าคน แต่ฉันอาจเผลอวาดตากลมโตเกินไป
ฉันก็จะใช้วิธีเปลี่ยนตากลมๆ นั้นเป็นแว่นตาแทน
แม้นตอนนั้นฉันยังไม่เข้าใจว่า ทำไมฉันจึงไม่ได้รับอนุญาตให้ใช้ยางลบ
และแม้นฉันจะไม่เคยคิดวาดรูป หน้าคนใส่แว่นมาก่อน
แต่ฉันก็ได้รูปหน้าคนตามที่ต้องการ แถมยังภูมิใจ
ว่า... สามารถวาดภาพๆนั้นด้วยความมั่นใจ
และไม่ต้องใช้ยางลบลบภาพเลยสักครั้ง
เวลาผ่านไป ฉันโตขึ้น ฉันเรียนรู้ว่า สิ่งที่ครูสอนวันนั้น
แท้จริงแล้วมันปลูกฝังนิสัยหนึ่งให้กับฉัน นั่นคือ...
การเข้าใจธรรมชาติของความผิดพลาด
ความผิดพลาดเป็นสิ่งที่เกิดขึ้นกับชีวิตของทุกคน
และในชีวิตหนึ่งก็มีหลายครั้งที่ฉันได้พบมันโดยไม่ตั้งใจ
สิ่งหนึ่งที่ทำให้ฉันยอมรับความผิดพลาดเหล่านั้น
และรวบรวมสติเพื่อแก้ไขปัญหาต่างๆได้ ก็คือ...
การที่ฉันเข้าใจว่า ธรรมชาติของความผิดพลาด
คือ... การที่มันเกิดขึ้นแล้ว จะคงอยู่ถาวร

ฉันไม่ได้รับอนุญาตให้ใช้ยางลบ ลบความผิดพลาด
แต่ฉันจำเป็นต้องใช้สมองต่อเติมแก้ไขภาพวาดของฉันให้สมบูรณ์ด้วยตัวเอง
ดังนั้น ถ้าความผิดพลาดมันเกิดขึ้นกับเราแล้ว การที่เราจะมานั่งร้องห่มร้องไห้
อ้อนวอนขอแหกกฎเพื่อใช้ยางลบกลับไปแก้ไขมันนั้น ย่อมเป็นไปไม่ได้
สิ่งเดียวที่จะทำได้ ก็คือ
รู้จักพลิกแพลงแก้ไขสิ่งเหล่านั้นด้วยสติ
และวาดภาพของตัวเองต่อไปด้วยความระแวดระวังมากยิ่งขึ้น
ทุกคนมีดินสอหนึ่งแท่งเพื่อที่จะวาดภาพชีวิตของเราให้สวยงาม
แต่เราไม่มียางลบสักก้อนที่จะเอาไปลบสิ่งที่เราทำผิดพลาดมาแล้วได้
ดังนั้น  เราต้องตั่งใจ และมีสติทุกครั้งที่ลากเส้น
ถึงแม้นภาพที่เราวาดออกมาจะไม่เหมือนกับภาพที่เราฝันไว้สักเท่าไหร่
แต่มันก็ออกมาจากมือของเรา เราควรจะภูมิใจกับมันได้เสมอ ไม่ต้องกลัวหรอก
แม้จะรู้ดีว่าสักวันหนึ่งเราอาจลากเส้นบิดเบี้ยวไปบ้าง
เพราะถึงอย่างไร ฉันยังเชื่อว่า.....
ถ้าสมองและหัวใจของเราทำงานอย่างเต็มที่
ภาพชีวิตเราก็งดงามได้โดยไม่ต้องใช้ยางลบ

หลัก(ทำ)ประจำใจ

วันนี้ขอเสนอหลักทำ 2 ข้อ คือ 'เอาวะ' กับ 'ช่างแม่ง'

ข้อที่ 1  เอาวะ
หลักทำ ' เอาวะ '
ใช้กับเหตุการณ์ที่จะตัดสินใจทำอะไรซักอย่าง
เมื่อท่านจะคิดจะทำอะไรซักอย่างให้พูดคำว่า ' เอาวะ '
หลักทำ ' เอาวะ ' จะช่วยให้ท่านได้ลงมือทำตามปรารถนา

ข้อที่ 2 ช่างแม่ง
หลักทำ ' ช่างแม่ง '
ใช้เมื่อเกิดความผิดพลาด หรือผิดหวัง
เมื่อเกิดความผิดพลาดหรือความผิดหวังขึ้นกับตัวท่าน ให้ท่านพูดคำว่า ' ช่างแม่ง '
หลักทำ ' ช่างแม่ง ' จะช่วยสลัดท่านออกจากความเศร้าหมองที่ท่านตอกย้ำตนเอง

บทที่ 18 การทำลิงค์เพื่อเปิดเป็นวินโด้ใหม่

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    กรุณาเลือกหัวข้อที่ท่านต้องการ<BR>
    <UL>
       <!-- ลิ้งค์ภายในเว็บไซต์เดียวกัน แต่เปิดเป็นหน้าต่างใหม่ -->
       <LI><A HREF="justusers.net/" TARGET="_blank">http://icu2t.blogspot.com"</A></LI>
       <!-- ลิ้งค์ไปเว็บไซต์อื่น โดยเปิดเป็นหน้าต่างใหม่ -->
       <LI><A HREF="http://www.mthai.com" TARGET="_blank">Mthai.Com</A></LI>
    </UL>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
กรุณาเลือกหัวข้อที่ท่านต้องการ
    * Welcome to http://icu2t.blogspot.com/
    * Mthai.Com

อธิบายคำสั่ง
<A    แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL"    ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
TARGET="_blank"    กำหนดให้เปิดหน้าต่างเบราส์เซอร์ใหม่ เพื่อแสดงหน้าเว็บเพจปลายทาง (ตัวเลือก)
>    อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ    ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A>    แท็กปิดท้ายข้อความลิ้งค์

บทที่17 การทำลิงค์เพื่อใส่อีเมล์

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    แบบที่ 1 ลิ้งค์ข้อความธรรมดา<p>
    <A HREF="newman6_9@hotmail.com">ส่งอีเมล์ถึงคนหลงทาง</A>
แบบที่ 2 ใช้รูปภาพเป็นลิ้งค์ เพื่อเพิ่มความน่าสนใจ<p>
    <A HREF="newman6_9@hotmail.com"><IMG SRC="mail2.gif" BORDER="0"></A>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
    แบบที่ 1 ลิ้งค์ข้อความธรรมดา
ส่งอีเมล์ถึงICU2T
   แบบที่ 2 ใช้รูปภาพเป็นลิ้งค์ เพื่อเพิ่มความน่าสนใจ


อธิบายคำสั่ง
Mailto : ที่อยู่อีเมล์@ปลายทาง  เป็นการสร้างลิ้งค์เพื่อส่งอีเมล์ โดยใช้โปรแกรมอีเมล์ในเครื่องของผู้ส่งเช่น Outlook Express
   ถ้าในเครื่องคอมฯ ของคุณมีโปรแกรมนี้อยู่ ลองคลิ๊กลิ้งค์ดูนะครับ จะได้เห็นการทำงานที่แท้จริง

บทที่ 16 การทำลิงค์โดยใช้รูปภาพแทนข้อความ

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
       <!-- ลิ้งค์โดยใช้รูปภาพที่มีอยู่ในเว็บไซต์ของเราเอง -->
       <A HREF="index.shtml"><IMG SRC="nav_home_off.gif"></A>
       <A HREF="sitmap.shtml"><IMG SRC="nav_sitemap_off.gif"></A>
       <!-- ลิ้งค์โดยใช้รูปภาพจากเว็บไซต์อื่นที่เป็นเว็บไซต์ปลายทาง -->
       <A HREF="http://www.mthai.com"><IMG SRC="http://www.mthai.com/mthai.gif"></A>
       <A HREF=""><IMG SRC=http://www.youtube.com/watch?v=4Pt27nejpOw/box.gif"></A>
</BODY>
</HTML>

ผลลัพธ์ที่ได้





อธิบายคำสั่ง
<A    แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL"    ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
>    อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
รูปภาพ    รูปภาพที่ใช้แสดงว่านี่คือลิ้งค์ (ดูรายละเอียดคำสั่ง IMG ในบทที่ 11)
</A>    แท็กปิดท้ายข้อความลิ้งค์

บทที่ 15 การทำลิ้งค์เชื่อมโยงไปยังเว็บเพจหน้าอื่นหรือเว็บไซด์อื่น

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
กรุณาเลือกหัวข้อที่ท่านต้องการ<BR>
<UL>
<!-- ลิ้งค์ไปยังเว็บเพจหน้าอื่น ภายในเว็บไซต์ของเรา -->
<LI><A HREF="index.shtml">คุยกันก่อนหน้าแรก</A></LI>
<LI><A HREF="purpose.shtml">วัตถุประสงค์การก่อตั้งฯ</A></LI>
<!-- ลิ้งค์ไปยังหน้าเว็บเพจ ของเว็บไซต์อื่น -->
<LI><A HREF="http:wsabstract.com/cutpastejava.shtml">Free JavaScripts!</A></LI>
<LI><A HREF="http:.scriptsolutions.com/home.html">Script Solutions</A></LI>
</UL>
</BODY>
</HTML>

อธิบายคำสั่ง..
<A แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="ชื่อไฟล์/ที่อยู่ URL" ชื่อไฟล์/ที่อยู่เว็บไซต์ปลายทางที่ต้องการเชื่อมโยงไปถึง (ต้องระบุ)
> อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A> แท็กปิดท้ายข้อความลิ้งค์

บทที่ 14 การทำลิ้งค์เชื่อมโยงภายในหน้าเว็บเพจเดียวกัน

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

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
กรุณาเลือกหัวข้อที่ต้องการ
1. <A HREF="#history">ประวัติความเป็นมา</A><br>
2. <A HREF="#operation">รูปแบบทั่วไปและลักษณะของ Web</A><br>
3. <A HREF="#referance">คำขอบคุณ</A><p>

1. <A NAME="history">ประวัติความเป็นมา</A><br>
                ประมาณปลายปี พ.ศ. 2539 เมื่ออินเตอร์เน็ตเข้ามามีบทบาทในประเทศไทยมากขึ้น (อันที่จริงมีมาก่อนหน้านั้นแล้ว แต่จำกัดอยู่ในวงแคบ) ข้าพเจ้า (นายทะเบียน) ก็ได้เป็นผู้หนึ่งที่สนใจและเริ่มศึกษาวิธีการใช้งานตลอดจนวิธีการเขียนเว็บเพจโดยใช้ภาษา HTML จนสามารถมีเว็บไซต์เป็น ของตนเองได้ ซึ่งเว็บไซต์แรกที่ทำขึ้นนั้น เป็นเว็บไซต์ให้บริการดาวน์โหลดเพลงไทยเดิมในรูปแบบของ Midi (ตำหนักเพลงไทยเดิม) และรูปภาพต่าง ๆ ที่เกี่ยวกับประเทศไทย โดยจัดทำเป็นภาษาอังกฤษ เพราะเมื่อ 3-4 ปีที่แล้ว Web Browser (IE) ยังแสดงผลภาษาไทยได้ไม่ค่อยดีนัก ....<p>

2. <A NAME="operation">รูปแบบทั่วไปและลักษณะของ Web</A><br>
                รูปแบบของการนำเสนอโดยทั่วไป ส่วนใหญ่จะเน้นการให้ความรู้ และบริการ แด่สมาชิก ซึ่งได้แก่ การสอนเขียนเว็บเพจด้วย HTML, การทำเว็บ เพจให้ดูมีชีวิตชีวาด้วย JavaScript, การสมัครขอพื้นที่ฟรีเพื่อจัดทำเว็บไซต์ (Hypermart), การจดโดเมนเนม, การย้ายโดเมนเนม (Hypermart) การโปรโมทเว็บไซต์, การหารายได้จากเว็บไซต์, บริการเว็บเบสอีเมล์ฟรี, บริการส่งบัตรอวยพร, บริการกระดานข่าว, บริการกระดานซื้อ-ขาย, บริการ กระดานรับสมัครงาน, แหล่งรวมบริการฟรีต่าง ๆ สำหรับเว็บมาสเตอร์ และอื่นๆ อีกมากมาย...<p>

3. <A NAME="referance">คำขอบคุณ</A><br>
                หากท่านเป็นอีกผู้หนึ่ง ที่รู้สึกชื่นชอบและสนับสนุนเว็บเพจภาษาไทย หรือต้องการเผยแพร่เว็บเพจภาษาไทยของท่านเอง ชมรมเว็บเพจไทย มีความยินดีที่จะขอเชิญท่านร่วม สมัครเป็นสมาชิกฟรี โดยไม่เสียค่าใช้จ่ายอย่างใดทั้งสิ้น และหากท่าน ต้องการทราบข่าวสาร การอัพเดทไซท์ และข่าวสารอื่น ๆ ที่ เป็นประโยชน์ กรุณาแจ้ง ที่อยู่อีเมล์ ของท่านด้วยครับ (ชมรมฯ จะส่ง จดหมายข่าว ให้กับเฉพาะสมาชิกที่ต้องการ เท่านั้น) อนึ่งสำหรับท่านที่เป็นเว็บมาสเตอร์ ขอเชิญแลกเปลี่ยนลิงค์กันได้ครับ...<p>
</BODY>
</HTML>

อธิบายคำสั่ง
ส่วนที่ 1 กำหนดข้อความลิ้งค์ (ต้นทาง)    
<A    แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
HREF="#ชื่อหัวข้อ"    ชื่อหัวข้อหรือตำแหน่ง ของข้อความที่ต้องการลิ้งค์ (ต้องระบุ)
>    อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ    ข้อความที่ใช้แสดงว่านี่คือลิ้งค์
</A>    แท็กปิดท้ายข้อความลิ้งค์

ส่วนที่ 2 กำหนดชื่อหรือตำแหน่งของลิ้งค์ (ปลายทาง)    
<A    แท็กคำสั่งเริ่มต้นเพื่อบอกเบราส์เซอร์ให้รู้ว่านี่คือลิ้งค์
NAME="ชื่อหัวข้อ"    ชื่อหัวข้อหรือตำแหน่งปลายทางของลิ้งค์ (ต้องระบุ)
>    อย่าลืมปิดท้ายด้วยเครื่องหมาย ">" นี้ทุกครั้ง
ข้อความ    ข้อความที่ใช้แสดงเป็นหัวข้อและตำแหน่งปลายทาง
</A>    แท็กปิดท้ายข้อความลิ้งค์

บทที่ 13 การใส่เพลงประกอบในเว็บเพจ

แบบที่ 1
<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<BGSOUND SRC="nice.mid" LOOP="Infinite">
</BODY>
</HTML>

แบบที่ 2
<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<EMBED SRC="nice.mid" HIDDEN="True" AUTOSTART="Yes" LOOP="True">
</BODY>
</HTML>

ผลลัพธ์ที่ได้
ตามตัวอย่างนี้ ท่านจะได้ยินเพลงบรรเลงสั้นๆ ที่ผมชื่นชอบมากที่สุด ครับ

อธิบายคำสั่ง
แบบที่ 1
BACKGROUND    เป็นแท็กคำสั่งเพื่อบอกให้เบราส์เซอร์รู้ว่าจะต้องดาวน์โหลดเพลงมาบรรเลงประกอบหน้าเว็บเพจ
SRC="ชื่อเพลง"    เป็นการกำหนดแหล่งที่เก็บและชื่อเพลงที่ต้องการให้เบราส์เซอร์ดาวน์โหลดมาบรรเลง
LOOP="infinite"    เป็นการกำหนดให้เบราส์เซอร์เล่นเพลงไปเรื่อยๆ ถ้าไม่ต้องการให้ลบข้อความนี้ออกไปครับ

แบบที่ 2
EMBED    เป็นแท็กคำสั่งเพื่อบอกให้เบราส์เซอร์รู้ว่าจะต้องดาวน์โหลดเพลงมาบรรเลงประกอบหน้าเว็บเพจ
SRC="ชื่อเพลง"    เป็นการกำหนดแหล่งที่เก็บและชื่อเพลงที่ต้องการให้เบราส์เซอร์ดาวน์โหลดมาบรรเลง
HIDDEN="True"    เป็นการกำหนดให้เบราส์เซอร์เล่นเพลงโดยซ่อนปุ่มควบคุมการเล่นเพลง
AUTOSTART="Yes" เป็นการกำหนดให้เบราส์เซอร์เล่นเพลงโดยอัตโนมัติ (ทันทีที่ดาวน์โหลดเสร็จ)
LOOP="True"    เป็นการกำหนดให้เบราส์เซอร์เล่นเพลงไปเรื่อยๆ ถ้าไม่ต้องการให้ลบข้อความนี้ออกไปครับ

บทที่ 12 การทำพื้นหลังในหน้า่เว็บเพจ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY BACKGROUND="paperln.gif">
<-- ใส่เนื้อหาของเว็บเพจตรงนี้ครับ -->
</BODY>
</HTML>

ผลลัพธ์ที่ได้..
ตามตัวอย่างนี้ ท่านจะเห็นภาพฉากหลังที่เป็นเส้นสีฟ้า ๆ ครับ

อธิบายคำสั่ง..
BACKGROUND ="ชื่อรูปภาพ" เป็นการกำหนดให้นำรูปภาพมาเป็นฉากหลังในหน้าเว็บเพจ

บทที่ 11 การจัดตำแหน่งของรูปภาพร่วมกับข้อความ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="mypic.gif" BORDER=0 ALIGN=LEFT>
<FONT COLOR="Blue">
ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...
<BR>
</FONT>
</CENTER>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
รูปที่ (1) ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ

ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...

ผลลัพธ์ที่ได้
รูปที่ (2) ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="mypic.gif" BORDER=0 ALIGN=RIGHT>
<FONT COLOR="Blue">
ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...
<BR>
</FONT>
</CENTER>
</BODY>
</HTML>

ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก.

คำอธิบาย
ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ (Default)
ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
ALIGN=TEXTTOP กำหนดให้ขอบบนของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
ALIGN=BOTTOM กำหนดให้ขอบล่างของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)

บทที่ 10 การใส่รูปภาพประกอบในเว็บเพจ

<HTML>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน><BR>
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"><BR>
ลองทายดูซิว่าเธอคือใคร<BR>
</CENTER>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
นี่คือภาพดาราคนโปรดของฉัน

ลองทายดูซิว่าเธอคือใคร

อธิบายคำสั่ง..
<IMG> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพจ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" คำอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ

บทที่ 9 การจัดลำดับหัวข้อและเนื้อหาโดยใช้

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
การจัดหัวข้อโดยใช้ <OL><BR>
<OL>
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
การจัดหัวข้อโดยใช้ <OL TYPE="A"><BR>
<OL TYPE="A">
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
การจัดหัวข้อโดยใช้ <OL TYPE="I"><BR>
<OL TYPE="I">
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ <OL>

1. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner[/color]
2.CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด[/color]
3. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter [/color]

การจัดหัวข้อโดยใช้ <OL TYPE="A">

A. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner[/color]
B.CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด[/color]
C.OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter [/color]

องการจัดหัวข้อโดยใช้ <OL TYPE="I">

I. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner[/color]
IICENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด[/color]
III.OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter[/color]

อธิบายคำสั่ง
<OL>          เริ่มต้นลำดับข้อมูล
TYPE="A"    กำหนดเครื่องหมายเพื่อใช้ในการลำดับข้อมูล ได้แก่ A, a, I, i ถ้าไม่กำหนดจะเริ่มต้นด้วย 1 เสมอ
<LI>           เริ่มต้นข้อมูลใน List
</LI>          สิ้นสุดข้อมูลใน List
</OL>         สิ้นสุดการลำดับข้อมูล

บทที่ 8 การจัดลำดับหัวข้อโดยใช้

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
การจัดหัวข้อโดยใช้ <UL TYPE="disc"><BR>
<UL TYPE="disc">
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE="square"><BR>
<UL TYPE="square">
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
การจัดหัวข้อโดยใช้ <UL TYPE="circle"><BR>
<UL TYPE="circle">
      <LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
      <LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
      <LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ <UL TYPE="disc">

• INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanne
• CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
• OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter

การจัดหัวข้อโดยใช้ <UL TYPE="square">

■ INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
■ CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
■ OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter

การจัดหัวข้อโดยใช้ <UL TYPE="circle">

๐ INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
๐ CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
๐ OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter

อธิบายคำสั่ง
<UL>          เริ่มต้นลำดับข้อมูล
TYPE=".."    เครื่องหมายลำดับข้อมูล ได้แก่ disc, square และ circle
                  โดยจะมี disc เป็นค่า Default
<LI>           เริ่มต้นข้อมูลใน List
</LI>          สิ้นสุดข้อมูลใน List
</UL>         สิ้นสุดการลำดับข้อมูล

บทที่ 7 การจัดวางตำแหน่งข้อความ

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    <P ALIGN=LEFT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
    <P ALIGN=CENTER>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
    <P ALIGN=RIGHT>Hello World, นี่คือเว็บเพจแรกของฉัน</P>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
                              Hello World, นี่คือเว็บเพจแรกของฉัน
                                                 Hello World, นี่คือเว็บเพจแรกของฉัน

อธิบายคำสั่ง
<P>                       เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN=LEFT>      กำหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN=CENTER>  กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
<P ALIGN=RIGHT>    กำหนดให้ข้อความอยู่ชิดด้านขวา
</P>                      เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ <P ALIGN>)

บทที่ 6 การกำหนดสีตัวอักษรและสีแบล็คกราวด์

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY TEXTCOLOR="black" BGCOLOR="lightblue">
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน

 

อธิบายคำสั่ง
<BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
TEXTCOLOR    ใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR    ใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี

บทที่ 5 การเน้นสีให้กับข้อความหรือตัวอักษร

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT COLOR=RED>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
    <FONT COLOR=GREEN>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=BLUE>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
   <FONT COLOR=VIOLET>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT COLOR=YELLOW>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน

อธิบายคำสั่ง
<FONT COLOR="ชื่อสี">    เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
</FONT>    เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้ เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

บทที่ 4 การกำหนดขนาดของตัวอักษร

<HTML>
<HEAD>
    <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT SIZE=6>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
    <FONT SIZE=5>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
    <FONT SIZE=4>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
   <FONT SIZE=2>
    Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
    </FONT>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, FONT SIZE = 6
Hello World, FONT SIZE = 5
Hello World, FONT SIZE = 4
Hello World, FONT SIZE = 2

อธิบายคำสั่ง
<FONT SIZE=ขนาดตัวอักษร> เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร    สามารถกำหนดได้ตั้งแต่ 1 - 7
</FONT>    เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

บทที่ 3 การกำหนดรูปแบบตัวอักษร

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
    Hello World, นี่คือเว็บเพจแรกของฉัน<P>
    <B> Hello World, นี่คือเว็บเพจแรกของฉัน</B><P>
    <I> Hello World, นี่คือเว็บเพจแรกของฉัน</I><P>
    <S> Hello World, นี่คือเว็บเพจแรกของฉัน</S><P>
    <U> Hello World, นี่คือเว็บเพจแรกของฉัน</U><P>
    ข้อความแบบ Super Script E=MC<SUP>2</SUP><P>
    ข้อความแบบ Sub Script H<SUB>2</SUB>O<P>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
ข้อความแบบ Super Script E=MC²
ข้อความแบบ Sub Script H₂O

อธิบายคำสั่ง
<B></B>     เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I></I>      เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S></S>     เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U></U>     เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP></SUP>    เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB></SUB>    เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script

บทที่ 2 การกำหนด font ที่จะใช้ในเว็บเพจ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<FONT FACE="andale mono">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
</FONT>
   <FONT FACE="comic sans ms">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
   </FONT>
   <FONT FACE="verdana">
   Hello World, นี่คือเว็บเพจแรกของฉัน<BR>
   </FONT>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน

อธิบายคำสั่ง
<FONT FACE="ชื่อฟ้อนต์ที่ใช้">    เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT>    เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

บทที่ 1 โครงสร้างพื้นฐานของ HTML

เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้

<HTML>
</HTML>

แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก
เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด
การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่,
แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์
หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก
สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร <HTML> และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" </HTML>
เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร

<HTML>
<HEAD>
</HEAD>
</HTML>

และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD)
ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง
เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร

<HTML>
<HEAD>
<TITLE>นี่คือเว็บเพจแรกของฉัน!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.html
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm

ขอแสดงความยินดี! ที่คุณสามารถมีเว็บเพจเอาไว้อวดคุณพ่อคุณแม่หรือคนอื่น ๆ ได้แล้ว! และคุณก็สามารถที่ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลก
ได้ดูผลงานของคุณคุณสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของคุณ
ซึ่งสิ่งที่คุณเห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML
ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพจ

ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่คุณจะต้องเตรียมก็คือ
ประการแรก คุณจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพจของคุณควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือคุณต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี
เครดิต จากหนังสือ html เบี้องต้น

การสร้างรหัสสี (Making Color Code)

รหัสสี(Color Code) เกิดจากการผสมกันของ 3 แม่สีคือ แดง(Red), เขียว(Green) และน้ำเงิน(Blue) หรือที่นิยมเรียกว่า RGB โดยปรกติรหัสสีที่ใช้ในการเขียนโปรแกรมจะมีทั้งหมด 6 ตัวอักษรและต้องขึ้นต้นด้วยเครื่องหมาย # เสมอ ยกตัวอย่างเช่น aabbcc โดยที่ aa แทนด้วยรหัสสีแดง bb แทนด้วยรหัสสีเขียว และสุดท้าย cc แทนด้วยรหัสสีน้ำเงิน บางครั้งอาจใช้แค่ 3 ตัวอักษร คือ abc ก็ได้ แต่ความละเอียดของการผสมสีจะมีน้อยกว่า ซึ่งตัวอักษรแต่ละตัว แท้จริงแล้วก็คือค่าตัวเลขฐานสิบหก เริ่มต้นจาก 0 1 2 3 4 5 6 7 8 9 a b c d e f เนื่องจากว่าเราไม่สามารถที่จะเขียนเป็น 10 11 12 13 14 15 ได้ก็เลยใช้เป็นอักษรภาษาอังกฤษแทน

การใช้ 3 ตัวอักษรดังตัวอย่าง abc แต่ละตัวจะมีค่าได้ตั้งแต่ 0 - 15 เพราะฉะนั้นจำนวนสีที่เราจะได้ก็คือ 16 x 16 x 16 = 4,096 สี ถ้าเป็น 6 ตัวอักษรก็จะได้เป็น 16 x 16 x 16 x 16 x 16 x 16 = 16,777,216 สี

การตั้งค่าแต่ละสีมีหลักการคือ ถ้าตัวเลขมากก็จะให้สีนั้นมาก เช่น ถ้าต้องการสีแดงเต็มกำลังก็ให้ใช้รหัส #ff0000 หรือจะใช้ 3 ตัวอักษร คือ #f00 ก็จะได้ผลที่ไม่แตกต่างกัน หรือถ้าต้องการสีเหลืองเต็มกำลัง ก็ให้ผสมระหว่างแม่สีแดงกับเขียน ก็จะได้รหัส #ffff00 หรือ #ff0

สำหรับรหัสสีสามารถคลิ๊กดูได้ ที่นี่

การลบจำนวนบทความออกจากป้ายกำกับ

เราสามารถวางป้ายกำกับ (Label) ไว้ที่หน้าหลักของบล๊อกเราได้โดยเข้าไปที่ รูปแบบ | องค์ประกอบหน้า แล้วคลิ๊กไปที่เพิ่ม Gadget เลือก พื้นฐาน | ป้ายกำกับ แล้ววางไว้ในตำแหน่งที่ต้องการ แต่บางครั้งเราอาจไม่ต้องการให้แสดงจำนวนบทความของแต่ละกลุ่มของบทความ หรืออาจจะไม่ชอบรูปแบบที่มีอยู่

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

• ขั้นแรกก็ต้องทำการขยายแม่แบบเครื่องมือก่อนน๊ะครับ
• ค้นหาคำว่า (<data:label.count>) ดูได้จากรูปแบบ Code ข้างล่างนี้

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

หรือ
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
วิธีการแก้ไข

1. ถ้าต้องการลบจำนวนตัวเลขของป้ายกำกับออกก็ให้ลบบรรทัดสีแดงทิ้งไปเลย
2. ถ้าต้องการรูปแบบเปลี่ยนจาก (...) เป็น [...] ก็ให้แก้เป็น [<data:label.count/>]
3. หรือถ้าต้องการแก้เป็น -... ก็ให้แก้เป็น -<data:label.count/>
4. หรือถ้าเราจะใส่เป็นคำว่า (เชิญคลิ๊ก) ก็ให้แก้เป็น (เชิญคลิ๊ก)

สรุปง่าย ๆ ก็คือ ถ้าต้องการแก้ให้เป็นอะไรก็เปลี่ยนเป็นอย่างนั้น

การแสดงบทความล่าสุดในหน้าแรก (Recent Post)

การแสดงบทความล่าสุดในหน้าแรก (Recent Post) สามารถทำได้ง่าย ๆ ด้วย Gaget ที่ทาง Blogger จัดเตรียมไว้ให้ ซึ่งจะอยู่ที่ รูปแบบ | องค์ประกอบของหน้า แล้วเลือก "เพิ่ม Gaget" จะมีหน้าต่างใหม่ปรากฎขึ้น แล้วเลือกไปที่เมนู เรื่องที่แนะนำก็จะเห็น Gadget Recent Post อยู่เป็นอันดับแรกดังรูป

หลังจากเราเลือกการใช้งาน Recent Post แล้ว เราจะทำการกำหนดค่าดังนี้


หัวข้อ เป็นแถบชื่อที่ใช้แสดง ดังตัวอย่างที่ผมใช้ คือ ชื่อว่า "บทความล่าสุด"
Number of Posts to Display คือ จำนวนของบทความที่ต้องการให้แสดง ในที่นี้ผมเลือก 3 บทความตามตำแหน่งหมายเลข 1
Display Post Date? ต้องการให้แสดงวันที่ของบทความด้วยหรือเปล่า
Show a Summary of Your Blog Posts? ต้องการให้แสดงบทความย่อด้วยหรือเปล่า
Summary Length การตั้งค่าจำนวนตัวอักษรที่ต้องการแสดง

การใช้งานส่วนตัวของผม ผมจะให้แสดงเฉพาะจำนวนของบทความหรือเฉพาะหัวข้อของบทความเท่านั้น เพราะฉะนั้นผมก็จะไม่เลือกหมายเลข 2 กับ 3 ดูตัวอย่างการแสดงผลได้ที่ทางด้านขวามือของบล๊อกนี้ได้ครับ ยังไงก็ลองเล่นกันดู ง่ายนิดเดียว

การตั้งค่าบทความบล๊อก (Configure Blog Posts)

การตั้งค่าบทความบล๊อก (Configure Blog Posts) สามารถทำได้โดยไปที่แถบเมนู รูปแบบ | องค์ประกอบของหน้า แล้วคลิ๊กไปที่ "แก้ไข" บทความบล๊อก หลังจากนั้นจะปรากฎหน้าต่างใหม่ขึ้นมาดังนี้

ตัวเลือกของหน้าหลัก (Number of posts on main page) สามารถเลือกตั้งค่าได้เป็นจำนวนบทความหรือจำนวนวันของบทความ ซึ่งปกติเราจะตั้งเป็นจำนวนบทความมากกว่า เพราะจะได้ผลการแสดงที่หน้าหลักคงที่ ถ้าหากเลือกเป็นจำนวนวัน วันไหนที่เราสร้างบทความใหม่หลาย ๆ บทความก็จะทำให้หน้าหลักยาวมากและเสียเวลาในการ Load ค่อนข้างเยอะ

ตัวเลือกของหน้าแสดงบทความ (Post Page Options) จะเป็นการเลือกใช้งานในส่วนของวันที่, ชื่อผู้เขียนบทความ, เวลาในการเขียนบทความ, ความคิดเห็น, การทำลิงค์ไปยังบทความนี้, ป้ายกำกับ, แสดงการแก้ไขอย่างรวดเร็ว, ปฎิกริยา และแสดงลิงค์การส่งบทความทางอีเมล ซึ่งตัวเลือกทั้งหมดนี้ยสามารถวางไว้ด้านบนหรือล่างบทความก็ได้ยกเว้นวันที่

การเลือกติดโฆษณาระหว่างบทความ (Google Adsense) จะต้องตั้งค่าภาษาให้เป็นภาษาอังกฤษก่อน โดยไปที่ การตั้งค่า | การจัดรูปแบบ เลือก "ภาษา" เป็น อังกฤษ สำหรับผมเลือกเป็น อังกฤษ(สหรัฐอเมริกา) เพราะเป็นถิ่นกำเนิดของเจ้าของ เมื่อเลือกภาษาเรียบร้อยแล้ว ให้เรากลับไปที่การตั้งค่าบทความบล๊อกอีกครั้งหนึ่ง ตอนนี้จะเป็นตัวเลือกใหม่ขึ้นมาถ้ดจาก "แสดงลิงก์ส่งบทความทางอีเมล" ให้เลือกติ๊กไปที่ "แสดงโฆษณาระหว่างบทความ" แต่ต้องมี Account ของ Adsense ก่อนน๊ะครับจึงสามารถใช้งานได้ เราสามารถเลือกการแสดงโฆษณาในแต่ละช่วงของบทความได้ และรูปแบบโฆษณาก็มีให้เลือกหลากหลายตามแบบฉบับของ Google Adsense นั่นแหละครับ

หลังจากที่เราเลือกภาษาเป็นภาษาอังกฤษ และติดตั้งโฆษณาเรียบร้อยแล้ว ให้เราเปลี่ยนภาษากลับมาเป็นภาษาไทยได้ โฆษณาก็จะยังอยู่เหมือนเดิมครับ

การป้องกันการคัดลอกบทความ (Copy & Paste)

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

• คลิ๊กไปที่ แม่แบบ | แก้ไข HTML
• ค้นหา Code <body>
• คัดลอก Code ข้างล่างนี้ทับไปที่ Code <body>

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">
หลังจากทำการบันทึกแม่แบบเสร็จเรียบร้อยแล้ว บล๊อกของเราก็จะไม่สามารถใช้เมาส์ในการคัดลอกบทความได้ ถึงอย่างไรก็ตามสำหรับคนที่ต้องการจะคัดลอกจริง ๆ ก็ยังสามารถทำได้อยู่ดี โดยใช้ตัว Web Browser ไปที่เมนู View | Page Source หรือกด "Ctrl + U" แต่ก็ไม่ใช่เรื่องง่ายสำหรับมือใหม่ที่จะคัดลอกบทความได้อย่างสมบูรณ์แบบ

การสร้าง Float Image ให้กับบล๊อกของเรา

Float Image คือ การสร้างรูปภาพให้ลอยอยู่ ณ ตำแหน่งใด ๆ ของหน้าเว็บ ซึ่งประโยชน์ของการใช้ส่วนใหญ่จะเป็นโฆษณาและนิยมให้อยู่ที่มุมใดมุมหนึ่งของหน้าเว็บดังตัวอย่าง

เราสามารถที่จะสร้าง Float Image หรือรูปภาพให้ลอยอยู่ในหน้าบล๊อกของเราได้ด้วยวิธีง่าย ๆ ดังนี้

• ไปที่ รูปแบบ | แก้ไข HTML
• ค้นหา Code ]]></b:skin> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
*botton และ left คือ ตำแหน่งที่ต้องการให้รูปภาพนั้นแสดงในหน้าบล๊อก สามารถเปลี่ยนเป็น top, bottom, left หรือ right ได้

• ขั้นตอนถัดไป คือ ให้ค้นหาคำว่า </body> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน

<div id='float_corner'>
<a href='http://blogger-assistant.blogspot.com'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiMfxSd8zRRiHbAxnIdcct2LLYjSuEw7wc6alpVkOoTh2q_ikE7MQL7Jwx_hLZ_Wh7AMID8VG2G08A8H95PQzyxyOi8VrPnc-urUfEO2ve2b-Od-TEJGIJjZU3tj2td0SnJRFSpxqize_/'/></a>
</div>
http://blogger-assistant.blogspot.com คือ ลิงค์ที่ต้องการ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiMfxSd8zRRiHbAxnIdcct2LLYjSuEw7wc6alpVkOoTh2q_ikE7MQL7Jwx_hLZ_Wh7AMID8VG2G08A8H95PQzyxyOi8VrPnc-urUfEO2ve2b-Od-TEJGIJjZU3tj2td0SnJRFSpxqize_/ คือ URL รูปภาพที่ต้องการ

การทำลิงค์ Read More... ให้กับบทความ

Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด มักนิยมใช้ในกรณีที่บทความค่อนข้างยาว การแสดงผลบทความลงสู่หน้าแรกของ Blogger ด้วยรูปแบบมาตราฐานที่ทำไว้ คือ การแสดงบทความทั้งหมดในครั้งเดียว ซึ่งจะทำให้ HomePage ของเราดูไม่สวยงาม อีกทั้งยังเสียเวลาในการ Load หน้าเว็บในกรณีที่เราตั้งค่าให้แสดงผลหน้าแรกหลาย ๆ บทความ เพราะฉะนั้น สิ่งที่เรากำลังจะทำต่อไปนี้ คือ ตัดเอาเฉพาะบทความในส่วนต้นมาใส่ไว้ที่หน้าเว็บโดยบทความที่เหลือจะต้องคลิ๊กไปที่ลิงค์ Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด

การทำลิงค์ก็ไม่ได้ยุ่งยากอะไร ให้ทำตามขั้นตอนดังนี้

• ไปที่ รูปแบบ | แก้ไข HTML
• ติ๊กขยายแม่แบบเครื่องมือ
• ค้นหาคำว่า <data:post.body/> หรือ <p><data:post.body/></p> ในส่วนของ HTML Code
• คัดลอก Code ข้างล่างนี้แทนที่ <data:post.body/> หรือ <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
<a expr:href='data:post.url'>อ&#3656;า��&#3656;อ...</a>
</b:if>
</b:if>
*เราสามารถเปลี่ยนคำว่า Read More... เป็นคำว่า อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด ได้

รูปแบบการเขียนบทความที่ต้องทำเพิ่มเติม
สำหรับการเขียนบทความที่เราต้องการให้มี Read More... เราจะต้องทำการแบ่งบทความโดยใส่ Tag เพิ่มเข้าไปตามรูปแบบนี้
เนื้อหาส่วนแรก
<span class="fullpost">
เนื้อหาส่วนที่เหลือ
</span>
หรือเราจะตั้งให้เป็นค่า Default ไปเลยก็ได้ โดยไปที่ การตั้งค่า | การจัดรูปแบบ และไปตั้งค่าที่บล๊อก "แม่แบบบทความ"

เมื่อเราต้องการเขียนบทความใหม่ในใหมด "เขียน" ค่าที่เราตั้งไว้จะแสดงเฉพาะส่วนของตัวหนังสือ โดยที่ Code ที่ทำ Highlight ไว้จะไม่แสดงในโหมดนี้ การเขียนบทความทำได้โดยเขียนทับตัวหนังสือ "ส่วนที่ต้องการให้แสดงผลในหน้าแรก" กับ "ส่วนที่ต้องการให้แสดงผลที่เหลือ" แต่ปัญหาคือ เราอาจจะเขียนทับลงไปบนโค้ดด้วย เพราะฉะนั้น ควรจะเขียนในโหมด Html จะดีกว่า

เลือกการเขียนในโหมด Html เพื่อป้องกันการเขียนบทความทับลงไปที่ Code ที่ตั้งไว้

ในส่วนตัวของผมเอง ผมไม่นิยมการตั้งค่าไว้ที่แม่แบบบทความ เนื่องจากปัญหาที่กล่าวมา อีกทั้งจะมีปัญหาในการใส่รูปภาพ และการเคลื่อนย้ายรูปภาพ หรือองค์ประกอบต่าง ๆ ของบทความ ทำให้ลิงค์ Read More... ผิดเพี้ยนไป ผมจะใช้วิธีการเขียนบทความทั้งหมดในโหมด "เขียน" แล้วมาใส่ Code <span class="fullpost"> และ </span> ที่หลังจะสะดวกและตรงกับที่เราต้องการโดยไม่มีความผิดเพี้ยนแต่ประการใด
อีกประการหนึ่งก็คือ ถ้าเราต้องการย้อนกลับมาแก้ไขบทความเก่า ๆ ผมจะเอา Code <span class="fullpost"> และ </span> ออกไปก่อน เมื่อแก้ไขเสร็จแล้วค่อยมาใส่ใหม่ ยังไงก็ค่อย ๆ ลองทำดูน๊ะครับ แต่อยากจะแนะนำให้ใช้วิธีที่ผมทำจะดีกว่า หรือไม่ก็ทดลองด้วยตัวเองก็จะทราบเหตุผลที่ผมกล่าวมาข้างต้น

การปรับแต่ง Title ของบล๊อก ให้ถูกหลัก SEO

ในส่วนนี้จะเป็นแก้ไขการแสดงผลของ Title ซึ่งโดยค่าปรกติที่ทาง Blogger ตั้งไว้จะแสดงหัวข้อบล๊อกก่อน หรือ Page Title แล้วตามด้วยชื่อของบทความ ในส่วนของ SEO จะให้ความสำคัญกับสิ่งที่ค้นหาเจอก่อนเปรียบเทียบก่อนและหลังการแก้ไข

ก่อนการแก้ไข รูปแบบ Page Title จะเป็นชื่อบล๊อกแล้วตามด้วยชื่อบทความ

หลังการแก้ไข รูปแบบ Page Title จะแสดงมีเฉพาะชื่อบทความเท่านั้น

แล้วเราสามารถที่จะแก้ไขในส่วนนี้ได้อย่างไร
การแก้ไขจะต้องเข้าไปที่ รูปแบบ | แก้ไข HTML เราจะเห็นตำแหน่งการวาง Page Title อยู่ถัดจาก head มาสองบรรทัด

ให้ทำการคัดลอก Code ทับไปที่ตำแหน่ง Page Title เดิม

<b
:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

การเปลี่ยน Favicon (Favicon Blogger Hack)

Favicon (Favorites Icon) หรืออาจจะเรียกกันว่า website icon, shortcut icon, url icon, หรือ bookmark icon ซึ่งจะมีขนาด 16x16 pixel ซึ่งจะแสดงอยู่ในตำแหน่งเดียวกันกับ Address Bar ดังภาพ

การสร้างรูป Favicon สามารถสร้างได้ 4 รูปแบบด้วยกัน คือ ICO, PNG, GIF และ JPEG ส่วนใหญ่แล้วเราจะใช้รูปแบบ ICO มากกว่า สำหรับการใช้งานในแต่ละรูปแบบมีดังนี้

HTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
• <link rel="icon" type="image/png" href="http://example.com/image.png">
• <link rel="icon" type="image/gif" href="http://example.com/image.gif">

XHTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico">
• <link rel="icon" type="image/png" href="/somepath/image.png">
• <link rel="icon" type="image/gif" href="/somepath/image.gif">

Internet Explorer จะมีรูปแบบที่แตกต่างกันเล็กน้อย

• <link rel="shortcut icon" type="image/x-icon" href="/somewhere/myicon.png">

สำหรับในส่วนที่ผมทำขึ้นมาจะเป็นรูปแบบ ICO อาจจะดูแตกต่างจากรูปแบบข้างบน แต่ความหมายเหมือนกันครับ หรือจะใช้รูปแบบที่ผมทำขึ้นมาก็ดีหน่อยเพราะผมทำมาใช้งานจริง รูปแบบข้างบนผมก็ไม่เคยลอง
<link href='http://www.........../favicon.ico' rel='shortcut icon' type='image/x-icon'/>
ตำแหน่งในการวางการแก้ไข Favicon จะอยู่ถัดมาจาก pageTitle ให้วางลงไปที่ตำแหน่งนี้ได้เลยครับ

การซ่อน Navbar (Hide Navigation Bar)

Navbar(Navigation Bar) หรือแถบนำทาง จะอยู่ในตำแหน่งบนสุดของบล๊อก ปรกติจะเป็นสีน้ำเงินเข้มแต่สามารถเปรียนสีได้ บางครั้งเรามีความรู้สึกว่า การมี Navbar แสดงอยู่ในส่วนบนสุดของบล๊อกเรา ทำให้บล๊อกเราดูเป็นมือสมัครเล่นจนเกินไป ถ้าเอาส่วนนี้ออก บล๊อกของเราก็จะทำให้ดูมีความรู้สึกว่าเป็นเหมือนเว็บไซด์ทั่ว ๆ ไป

สำหรับการซ่อน Navbar ทำได้ง่าย ๆ โดยไปที่แถบ รูปแบบ | แก้ไข HTML แล้วทำการเพิ่ม Code ข้างล่างนี้ไว้ในตำแหน่งดังภาพ ซึ่งจะอยู่เกือบจะบนสุดของหน้าการแก้ไข HTML โดยที่เราไม่จำเป็นต้องติ๊กขยายแม่แบบเครื่องมือ
#navbar-iframe {
display: none !important;
}
ตำแหน่งการว่าง Code เพื่อซ่อน Navbar

เมื่อทำการคัดลอก Code ไว้ในตำแหน่งดังภาพเรียบร้อยแล้ว ให้เราคลิ๊กไปที่ "แสดงตัวอย่าง" เพื่อตรวจสอบความเรียบร้อยก่อนการบันทึกแม่แบบ

รูปแบบ - เลือกแม่แบบใหม่ (Choose New Template)

ณ ขณะนี้แม่แบบที่ทาง Blogger จัดเตรียมไว้ มีให้เลือกทั้งหมด 16 แม่แบบ แต่ละแม่แบบก็มีตัวเลือก ถ้านับความแตกต่างของแม่แบบที่ทาง Blogger จัดไว้จะมีทั้งหมด 38 แม่แบบด้วยกัน ซึ่งแต่ละแม่แบบสามารถแสดงตัวอย่างก่อนได้ ดูตัวอย่างได้จากภาพด้านล่างนี้ครับ

รูปแบบ - แก้ไข HTML (Edit HTML)

จากการเรียนรู้การทำบล๊อกด้วย Blogger เราจะเห็นได้ว่าการปรับแต่งต่าง ๆ ทำได้ง่ายเพียงอาศัยความรู้ทางเทคนิคนิดหน่อยเท่านั้น แต่สำหรับบางคนแ้ล้วการปรับแต่งเบื้องต้นในส่วนที่ทาง Blogger สร้างไว้ให้อาจจะยังไม่เพียงพอเพราะต้องการสร้างความแตกต่างให้กับบล๊อกของตัวเอง จึงต้องอาศัยความรู้ในการแก้ไข HTML มาประยุกต์ใช้
ก่อนทำการแก้ไข HTML ทุกครั้ง สิ่งแรกที่เราควรจะทำจนชินเป็นนิสัยก็คือ การสำรองแม่แบบ โดยให้คลิ๊กไปที่ ดาวน์โหลดแม่แบบฉบับเต็ม(Download Full Template) แล้วทำการบันทึก/ตั้งชื่อไฟล์นามสกุล XML ไว้ในเครื่องคอมพิวเตอร์ของเรา สำหรับการเรียกคืนแม่แบบ (Restore Template) ทำได้โดยการคลิ๊กที่ปุ่ม "Browse_" แล้วเลือกไฟล์ XML ที่เราได้ทำการบันทึกเอาไว้ก่อนหน้า เพียงเท่านี้เราก็จะได้ทุกสิ่งทุกอย่างที่เหมือนเดิมกลับคืนมา

การหากว่าเราต้องการแก้ไข HTML ในส่วนของ Widget ด้วย เราจะต้องทำการติ๊กไปที่ "ขยายแม่แบบเครื่องมือ"(Expand Widget Template) ซึ่งโดยปกติแล้วเราก็จะติ๊กไปที่นี่เสมอเมื่อเราต้องการที่จะแก้ไขขั้นสูง ในขณะที่เราทำการแก้ไข HTML เราสามารถแสดงตัวอย่างของหน้าเพ็จหลังจากแก้ไขได้ด้วยการคลิ๊กไปที่ "แสดงตัวอย่าง" จนเราแน่ใจว่าเราได้ทำการแก้ไขในส่วนที่เราต้องการจนถูกใจแ้ล้วถึงจะบันทึกแม่แบบ
ในส่วนการแก้ไข HTML จะเป็นส่วนที่จะเพิ่มสีสันให้กับบล๊อกของเราเป็นอย่างมาก

รูปแบบ - แบบอักษรและสี (Fonts and Colours)

เราสามารถกำหนดแบบตัวอักษรและสีได้สำหรับแม่แบบมาตราฐานที่ทาง Blogger จัดเตรียมไว้ให้ ในส่วนของแม่แบบที่นำมาจากที่อื่น หรือผ่านการปรับเปลี่ยนรูปแบบอาจจะไม่สามารถใช้การในส่วนนี้ได้ ต้องใช้วิธีการตั้งค่าแบบตัวอักษรและสีด้วยภาษา Html โดยไปที่เมนู รูปแบบ | แก้ไข Html
หน้าต่างการแก้ไขแบบอักษรและสีจะมีอยู่ 3 ส่วนด้วยกันคือ

• ช่องเลือกสิ่งที่ต้องการแก้ไข
• ช่องเลือกแบบสีที่ต้องการ
• รูปแบบตัวอย่างหลังจากตั้งค่า

เราสามารถใช้ฟังก์ชั่นอัตโนมัติในการสลับสีบล๊อกโดยการคลิ๊กไปที่ "สลับสีบล๊อก" หรือเปลี่ยนกลับเป็นค่าเริ่มต้นของแม่แบบได้ ให้คลิ๊กไปที่ "เปลี่ยนกลับเป็นค่าเริ่มต้นของแม่แบบ" หรือ กดปุ่ม "ล้างข้อมูลการแก้ไข"

สำหรับการแก้ไขแบบอักษร บริเวณ "แบบสีที่ต้องการ" จะเปลี่ยนไปเป็น "แบบอักษรที่ต้องการ" แทน ซึ่งมีอยู่ด้วยกัน 6 แบบอักษร คือ

1. Arial
2. Courier
3. Georgia
4. Times
5. Trebuchet
6. Verdana

สามารถปรับลักษณะตัวอักษรเป็นตัวหนาหรือตัวเอียง และสามารถทำให้เล็กลงหรือใหญ่ขึ้นก็ได้

รูปแบบ - องค์ประกอบของหน้า (Page Elements)

เราสามารถจัดเรียงองค์ประกอบแม่แบบได้ เพียงคลิ๊กองค์ประกอบที่ต้องการย้าย จากนั้นลากและวางองค์ประกอบในที่ที่เราต้องการ เราสามารถย้ายองค์ประกอบของหน้าไปยังด้านบน, ด้านล่าง หรือด้านข้างได้ ยกเว้นในส่วนของแถบนำทาง(Navbar) และส่วนหัวของหน้า(Page Header) และส่วนของบทความ(Post)
องค์ประกอบของหน้าตามรูปแบบมาตราฐานที่ Blogger ตั้งไว้ สามารถแบ่งได้เป็น 7 ส่วนด้วยกันคือ
1. แถบนำทาง (Navbar) เป็นแถบที่อยู่บนสุดของบล๊อกมีให้เลือก 4 สีด้วยกัน คือ สีน้ำเงิน, แทน, ดำ และสีเงิน

2. ส่วนหัวของหน้า (Page Header) สำหรับกำหนดชื่อบล๊อก, คำอธิบายบล๊อก สามารถใส่รูปภาพแทรกลงไปให้อยู่ข้างหลังชื่อและคำอธิบายบล๊อก หรือแทนที่ได้
3. ส่วนบนบทความ (Header Wrapper) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้ โดยการคลิ๊กไปที่ "เพิ่ม Gadget" ส่วนใหญ่แล้วเราจะใช้ Gadget ในหมวดพื้นฐานและเรื่องที่แนะนำ ส่วนใครที่ต้องการเพิ่มสีสันให้กับบล๊อกก็มีให้เลือกอยู่หลากหลาย ในส่วน Gadget ที่สำคัญจะขอให้ติดตามในเรื่องของ Gadget อีกทีครับ

4. ส่วนของบทความ (Post) สำหรับตั้งจำนวนบทความที่ต้องการให้แสดงที่หน้าแรก และมีตัวเลือกต่าง ๆ ให้เลือกใช้ เรายังสามารถที่จัดวางตำแหน่งของผู้เขียน, เวลา, ความคิดเห็น และป้ายกำกับให้อยู่ส่วนบนของบทความหรือสลับตำแหน่งกันได้

5. ส่วนล่างบทความ (Footer Wrapper) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้
6. ส่วนของด้านข้าง (Sidebar) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้
7. ส่วนล่างของบล๊อก (Footer) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้

รูปแบบ (Layout)

การตั้งค่ารูปแบบ(Layout Setting) เปรียบเสมือนการออกแบบบ้านว่าให้มีลักษณะและสีสันอย่างไรตามต้องการ บางคนอาจจะต้องการบ้านแบบเรียบ ๆ ง่าย ๆ ดูสะอาดตา บางคนอาจต้องการบ้านที่ดูหรูหราสวยงามและทันสมัย ซึ่งนั่นก็แล้วแต่ความต้องการ ในการทำเว็บไซด์หรือบล๊อกก็เช่นเดียวกัน รูปร่างหน้าตาของบล๊อกนับว่าเป็นส่วนสำคัญต่อผู้เข้าชมเป็นอย่างยิ่งและควรจะออกแบบสอดคล้องกับวัตถุประสงค์ในการตั้งบล๊อก การออกแบบบล๊อกให้มีความซับซ้อนหรือมีลูกเล่นต่าง ๆ มากจนเกินไปก็อาจจะไม่ส่งผลดีต่อผู้่ชม ผมไม่สามารถบอกได้ว่าการออกแบบบล๊อกแบบไหนที่ถือว่าเป็นการออกแบบที่ดีที่สุดผู้เข้าชมเท่านั้นจะเป็นผู้ที่ตัดสิน

คุณลักษณะการจัดหน้าของ Blogger เป็นคุณสมบัติการแก้ไขแม่แบบที่ใช้งานง่าย ช่วยให้เราสามารถใช้แม่แบบ Blogger โดยไม่ต้องอาศัยความรู้ด้าน HTML หรือ CSS แต่อย่างใด ขณะนี้เราสามารถแก้ไขและปรับแต่งสี แบบอักษร ส่วนหัวและแถบด้านข้างของบล็อกด้วยการคลิกเมาส์ไม่กี่ครั้ง ในการปรับแต่งการจัดหน้าของบล็อก ให้ไปที่แท็บ แม่แบบ | องค์ประกอบของหน้า ใน Blogger
การตั้งค่ารูปแบบจะมีเมนูย่อยให้เลือก 4 เมนูด้วยกัน คือ

• องค์ประกอบของหน้า (Page Elements)
• แบบอักษรและสี (Fonts and Colors)
• แก้ไข HTML (Edit HTML)
• เลือกแม่แบบใหม่ (Pick New Template)

การตั้งค่า - สิทธิ์ (Permissions)

การตั้งค่าสิทธิ์มีอยู่ 2 ส่วนด้วยกันคือ สิทธิ์สำหรับผู้เขียนและสิทธิ์สำหรับผู้อ่าน
สิทธิ์สำหรับผู้เขียน -เราสามารถที่จะอนุญาติให้เพื่อนสมาชิกแบบเฉพาะเจาะจงสามารถเขียนบทความบทบล๊อกของเราได้ ซึ่งสามารถเพิ่มนักเขียนบทความในบล๊อกของเราได้ถึง 100 คนด้วยกัน

สิทธิ์สำหรับผู้อ่าน -เราสามารถระบุได้ว่าบทความในบล๊อกของเราอนุญาติให้ใครเข้ามาอ่านได้บ้าง ส่วนนี้ก็มีประโยชน์เมื่อเราใช้งานบล๊อกเฉพาะกลุ่มและเป็นความลับของกลุ่ม หรือต้องการให้มีการแลกเปลี่ยนความคิดเห็นเฉพาะกลุ่มของเราเท่านั้น

การตั้งค่า - OpenID

เราสามารถใช้ OpenID URL เพื่อเข้าสู่ไซต์อื่นๆ ที่ใช้งาน OpenID นอกจากนี้เรายังสามารถกำหนดให้ผู้ใช้ OpenID สามารถแสดงความคิดเห็นในบล็อกของเรา โดยปรับการตั้งค่า ความคิดเห็น
ตัวอย่างเช่น URL ของ OpenID ของผมคือ http://icu2t.blogspot.com/
แล้ว OpenID มันคืออะไรกัน
OpenID เป็นระบบหนึ่งที่ทำให้เราสามารถใช้ URL เป็นข้อมูลระบุตัวตน (Identity) ที่เราสามารถใช้ลงชื่อ (Sign in หรือ Log in) เข้าสู่เวบไซต์ต่างๆ ที่เปิดรับมาตรฐาน OpenID นี้ได้ โดยที่เราไม่ต้องสมัครเป็นสมาชิกของแต่ละเวบไซต์ทุกครั้ง ประโยชน์ก็คือ เราไม่ต้องจำชื่อและรหัสผ่านของเราในแต่ละเวบไซต์ จึงเพิ่มความสะดวกแก่ผู้ใช้ยิ่ง ปรัชญาที่อยู่เบื้องหลังของ OpenID คือ การระบุตัวตนบนโลกอินเทอร์เน็ต เปรียบเหมือนการทำบัตรประจำตัวประชาชน ที่ใช้ระบุความแตกต่างของแต่ละบุคคล เช่น ชื่อสกุล รูปถ่ายใบหน้า วันเดือนปีเกิด ภูมิลำเนา เชื้อชาติ และ ศาสนา เป็นต้น ดังนั้น OpenID จึงถือว่าเป็นแนวคิดใหม่ที่ปฏิวัติโลกไซเบอร์ ด้วยการแจ้งตัวตนที่แท้จริงบนโลกอินเทอร์เน็ต

การตั้งค่า - อีเมลและมือถือ (Email & Mobile)

เราสามารถอัปเดทบล๊อกหรือส่งข้อความผ่านทางอีเมลและโทรศัพท์มือถือได้ในส่วนของการตั้งค่าส่วนนี้
ที่อยู่ BlogSend (BlogSend Address)
เราสามารถใส่อีเมลของผู้ที่ต้องการรับบทความล่าสุดได้ทางช่องทางนี้ บทความล่าสุดของเราก็พร้อมที่จะส่งถึงเพื่อนสมาชิกในทันที
ที่อยู่สำหรับการส่งบทความผ่านอีเมล (Email Posting Address)
เป็นการตั้งค่าเพิ่มให้กับอีเมลของเราเพื่อให้สามารถอัปเดทบล๊อกได้ทางอีเมลโดยไม่ต้อง Login เข้าบล๊อกโดยเราสามารถเลือกได้ว่าให้ทำการเผยแพร่ทันที่หรือให้เป็นฉบับร่างก่อน
อุปกรณ์เคลื่อนที่ (Mobile Devices) เป็นการส่งบทความด้วย MMS แต่ต้องลงทะเบียนโทรศัพท์มือถือ ถ้าโทรศัพท์ของเราไม่สนับสนุนการใช้  MMS สามารถลงทะเบียนการใช้ SMS ได้
วิธีการตั้งค่า คือ ให้เลือก "เพิ่มโทรศัพท์มือถือ" แล้วจะมีหน้าต่างใหม่ปรากฎขึ้น แล้วเราก็ส่งรหัสยืนยันนี้จากโทรศัพท์มือถือของเราไปที่ go@blogger.com

การตั้งค่า - ฟีดของไซต์ (Site Feed)

การตั้งค่าฟีดมี 2 โหมดให้เลือกด้วยกัน คือ โหมดพื้นฐานและขั้นสูง กรอบสีน้ำเงินคือความแตกต่างของทั้งสองโหมด ในส่วนท้ายจะเหมือนกันทั้งสองโหมด เรามาดูแต่ละส่วนกันเลยครับ

อนุญาตให้ใช้ฟีดของบล็อก (Allow Blog Feeds)
โหมดพื้นฐาน
เลือกแบบเต็ม เพื่อจัดส่งเนื้อหาของบทความแบบเต็ม
เลือกแบบสั้น ถ้าต้องการจัดส่งเนื้อหาเฉพาะย่อหน้าแรก หรือประมาณ 255 ตัวอักษร ขึ้นอยู่กับว่าข้อใดสั้นกว่า การตั้งค่านี้จะใช้กับฟีดแต่ละประเภท (บทความ ความคิดเห็น และฟีดของความคิดเห็นต่อบทความ)
โหมดขั้นสูง
ในโหมดขั้นสูงสามารถเลือกการฟีดแบบเต็มหรือแบบสั้นก็ได้ในส่วนของบทความ ความคิดเห็น หรือความคิดเห็นต่อบทความ
URL การเปลี่ยนเส้นทางฟีดข้อมูลของบทความ (Post Feed Redirect URL)
หากใช้ FeedBurner หรือบริการอื่นๆ เพื่อประมวลผลฟีดข้อมูลบทความ ให้ป้อน URL ของฟีดข้อมูลแบบเต็มที่นี่ Blogger จะเปลี่ยนเส้นทางการเข้าชมไปยังที่อยู่นี้
ส่วนท้ายฟีดของบทความ (Post Feed Footer)
ค่านี้จะปรากฏหลังจากแต่ละบทความในฟีดของไซต์ของคุณ ถ้าคุณใช้โฆษณาหรือส่วนเพิ่มฟีดข้อมูลของบุคคลที่สาม คุณสามารถตั้งค่า "เปิดใช้หน้าบทความ" เป็น "ใช่" (ใน การตั้งค่าการเก็บบทความ) และตั้งค่า "ใช้ฟีดของบล็อกได้" เป็น "เต็ม" (ด้านบน)