เพิ่มองค์ประกอบหน้า ตอนที่ 5 : เมนู "ข้อความ"
สวัสดีครับเพื่อนๆ จากตอน เพิ่มองค์ประกอบหน้า ตอนที่ 4 : เมนู "ป้ายกำกับ" "ฟีด" และ "HTML/จาวาสคริป" ผมคิดว่ามันยาวมากเกินไป ดังนั้นตอนที่ 5 นี้ ผมขออธิบายเฉพาะองค์ประกอบ "ข้อความ" เพียงอย่างเดียว เพราะถือว่ายาวเหมือนกัน ผมจะดูความเหมาะสมของการเขียนเนื้อหาในแต่ละตอนนะครับ ไม่อยากให้ยาวเกินไปครับ
เช่นเคยนะครับ ผมนำหน้าของการเพิ่มองค์ประกอบรวม มาให้ดูนะครับ
องค์ประกอบ "ข้อความ" นั้นผมใช้เยอะมากๆ ทั้งใช้เพื่อบอกรายละเอียด คำอธิบาย เชื่อมโยงหน้าเว็บไซต์อื่น หรือเชื่อมโยงหน้าเว็บบล็อก ภายในบล็อก และผมยังดัดแปลงใช้เป็น "เมนู" สำคัญๆ เช่น "หน้าหลัก" "ติดต่อผม" "สมุดเยี่ยม" "เกี่ยวกับผม" เป็นต้น เพื่อพยายามทำบล็อกให้ใกล้เคียงเว็บไซต์ ทำให้ผู้อ่านใช้งานได้ง่ายด้วยครับ
เมื่อกดแบนเนอร์องค์ประกอบ "ข้อความ" ก็จะเห็นหน้าต่างดังภาพข้างบนนะครับ เหมือนเคยนะครับ "หัวข้อ" ก็ใส่เรื่องที่เกี่ยวข้อง ส่วนพื้นที่ใหญ่ข้างล่าง ก็ใส่ข้อความที่ต้องการนำเสนอ ซึ่งเดี๋ยวผมจะตกตัวอย่างให้ได้เห็นกันชัดเจน แต่ก่อนอื่นผมอยากจะให้ทุกท่าน ไปรู้จักกับสัญลักษณ์ของการใช้งานข้อความก่อนนะครับ ให้ดูที่ด้านขวา จะเห็นสัญลักษณ์ 6 ตัว คือ
ลองมาดูตัวอย่างของกาวรใช้งานองค์ประกอบ "ข้อคาม" กันนะครับ ผมนำตัวอย่างจากเว็บบล็อกเรื่องความพิการของผม http://preedastation.blogspot.com/ มาเป็นตัวอย่างนะครับ
ดูที่ด้านขวาเหนือรูปภาพผมนะครับจะเห็น หัวข้อว่า "บทความที่เพื่อนๆ ควรติดตามอ่านทุกเรื่องจากประสบการณ์จริงของผมครับ" และมฝีข้อความคือ "สามารถติดตามบทความต่อไป เกี่ยวกับ แผลกดทับและการพิทักษ์สิทธิ์ของผู้พิการ เร็วๆ นี้ครับ" จะเห็นว่า ผมใช้ตัวหนาและการใส่สี กับคำว่า "แผลกดทับ" และ "การพิทักษ์สิทธิ์ของผู้พิการ" ครับ แต่ยังไม่มีการเชื่อมโยงลิ้งค์
ตัวอย่าง " Siam PWD Blog พื้นที่สำหรับการแบ่งปันประสบการณ์ชีวิตของผู้พิการรุนแรง ที่มีแนวคิด อยากเผยแพร่บทความให้เกิดประโยชน์แก่ทุกฝ่าย และชักชวนให้เพื่อนผู้พิการท่านอื่นได้เริ่มเขียนบทความกันบ้างครับ" เป็นตัวอย่างการเชื่อมโยงลิ้งค์ และมีตัวหนาด้วยที่ข้อความ "Siam PWD Blog" มีหัวข้อเป็น "SIAM PWD BLOG ประสบการณ์ของผู้พิการรุนแรง"
ตัวอย่างของการใช้งานองค์ประกอบ "ข้อความ" ที่นำมาประยุกต์ใช้เป็น "เมนู" เหมือนเว็บไซต์ต่างๆ ได้เช่นกันนะครับ ดังตัวอย่างใต้ชื่อบล็อก Blogger Build ที่มีเมนู "หน้าหลัก" "สมุดเยี่ยม" "เกี่ยวกับผู้จัดทำ" "เกี่ยวกับบล็อก" และ "ติดต่อเรา"
การสร้างเมนูหลักๆ ดังที่ผมทำให้ดูเป็นตัวอย่างตามภาพข้างบนนี้ ยังต้องมีเทคนิคเพิ่มเติม ซึ่งคงจะอธิบายในบทความตอนนี้ ไม่ได้แน่ๆ เดี๋ยวจะยาวมาก คงจะอธิบายในบทความที่เกี่ยวกับ การสร้างบล็อก ให้คล้ายเว็บไซต์ ลองติดตามอ่านกันนะครับ
คราวนี้มาดู วิธีการย้ายพื้นที่ของ "เมนู" ตามความเหมาะสม ซึ่งตัวอย่างนี้ผมจะยกตัวอย่างการย้าย "องค์ประกอบ" จากฝั่งซ้าย ขึ้นไปข้างบนนะครับ จากภาพดูตามลูกศร ผมกำลังจะย้ายองค์ประกอบ "ข้อความ" ไปอยู่ใต้ "ชื่อบล็อก" (โปรดสังเกต ขณะทำ ต้องไม่มีพื้นที่สีเหลือง นะครับ)
เมื่อย้ายเสร็จแล้ว จะเห็นว่า "องค์ประกอบข้อความ" ได้ย้ายไปอยู่ข้างบนแล้วนะครับ ซึ่งจะเห็นว่ามีพื้นที่ยาวขึ้น เท่ากับ "องค์ประกอบชื่อบทความ" จากนั้นให้กดปุ่ม "บันทึก" ที่มีสีส้ม ก็จะเห็นพื้นที่สีเหลืองที่ว่า เปลี่ยนแปลงเสร็จเรียบร้อยแล้ว และมีเมนู "ดูบล็อก" ถ้ากด ก็จะเห็นหน้าเว็บบล็อก ที่มีการเปลี่ยนแปลงเรียบร้อยแล้วครับ
เช่นเคยนะครับ ผมนำหน้าของการเพิ่มองค์ประกอบรวม มาให้ดูนะครับ
องค์ประกอบ "ข้อความ" นั้นผมใช้เยอะมากๆ ทั้งใช้เพื่อบอกรายละเอียด คำอธิบาย เชื่อมโยงหน้าเว็บไซต์อื่น หรือเชื่อมโยงหน้าเว็บบล็อก ภายในบล็อก และผมยังดัดแปลงใช้เป็น "เมนู" สำคัญๆ เช่น "หน้าหลัก" "ติดต่อผม" "สมุดเยี่ยม" "เกี่ยวกับผม" เป็นต้น เพื่อพยายามทำบล็อกให้ใกล้เคียงเว็บไซต์ ทำให้ผู้อ่านใช้งานได้ง่ายด้วยครับ
- ตัวที่ 1 : ตัวอักษร b หนา ที่ถ้ากด ข้อความต่างๆ ของเราก็จะหนา ทำให้เด่น อ่านง่าย เนื่องจากการตกแต่งบล็อก ด้วยการใช้องค์ประกอบ "ข้อความ" ของ Blogger ไม่สามารถเพิ่มขนาดของตัวอักษรได้ ทำให้หนาได้อย่างเดียว
- ตัวที่ 2 : ตัว i เอียง ถ้ากด ข้อความต่างๆ ก็จะเอียง เช่นนี้ ปรีดาเป็นคนพิการรุนแรง เป็นต้นครับ
- ตัวที่ 3 : เป็นการเปลี่ยนสีของตัวอักษร ถ้ากดที่สัญลักษณ์ "ตัว T มีแถบสี" ก็จะเห็นตารางสี กดเลือกสี ตัวอักษณที่เป็นข้อความนั้นๆ ก็จะเปลี่ยนสีตามเราแก้ไข ลืมบอกไปว่า ก่อนเปลี่ยนสี ต้องลากเม้าท์ให้ครอบคลุมข้อความ หรือตัวอักษณที่ต้องกาวรจะแก้สีก่อนนะครับ
- ตัวที่ 4 : เป็นกาวรเชื่อมโยงลิ้งค์ วิธีใช้งานคือ ถ้าเราต้องการให้ตัวอักษรใดหรือข้อความใด เมื่อผู้อ่านกดปุ๊บ ไปยังอีกหน้าเว็บไซต์ เป็นต้น ก่อนกดก็ลากเม้าท์พื้นที่ ที่ต้องการจะเชื่อมโยงลิ้งค์ที่ตัวอักษร หรือข้อความก่อน จากนั้นกดที่สัญลักษณ์ จะขึ้นหน้าต่างเล็กๆ ให้ใส่ URL ที่ต้องการจะเชื่อมโยง แล้วก็กด "บันทึก" ก็จะเห็นว่าใต้ข้อความนั้นมี "ขีดเส้นใต้" ถือว่าเสร็จในส่วนนี้แล้วครับ
- ตัวที่ 5 และ 6 ผมยังไม่เคยใช้ครับ ถ้าใช้แล้วจะรีบมาเขียนบทความเพิ่มนะครับ
ลองมาดูตัวอย่างของกาวรใช้งานองค์ประกอบ "ข้อคาม" กันนะครับ ผมนำตัวอย่างจากเว็บบล็อกเรื่องความพิการของผม http://preedastation.blogspot.com/ มาเป็นตัวอย่างนะครับ
ดูที่ด้านขวาเหนือรูปภาพผมนะครับจะเห็น หัวข้อว่า "บทความที่เพื่อนๆ ควรติดตามอ่านทุกเรื่องจากประสบการณ์จริงของผมครับ" และมฝีข้อความคือ "สามารถติดตามบทความต่อไป เกี่ยวกับ แผลกดทับและการพิทักษ์สิทธิ์ของผู้พิการ เร็วๆ นี้ครับ" จะเห็นว่า ผมใช้ตัวหนาและการใส่สี กับคำว่า "แผลกดทับ" และ "การพิทักษ์สิทธิ์ของผู้พิการ" ครับ แต่ยังไม่มีการเชื่อมโยงลิ้งค์
ตัวอย่าง " Siam PWD Blog พื้นที่สำหรับการแบ่งปันประสบการณ์ชีวิตของผู้พิการรุนแรง ที่มีแนวคิด อยากเผยแพร่บทความให้เกิดประโยชน์แก่ทุกฝ่าย และชักชวนให้เพื่อนผู้พิการท่านอื่นได้เริ่มเขียนบทความกันบ้างครับ" เป็นตัวอย่างการเชื่อมโยงลิ้งค์ และมีตัวหนาด้วยที่ข้อความ "Siam PWD Blog" มีหัวข้อเป็น "SIAM PWD BLOG ประสบการณ์ของผู้พิการรุนแรง"
ตัวอย่างของการใช้งานองค์ประกอบ "ข้อความ" ที่นำมาประยุกต์ใช้เป็น "เมนู" เหมือนเว็บไซต์ต่างๆ ได้เช่นกันนะครับ ดังตัวอย่างใต้ชื่อบล็อก Blogger Build ที่มีเมนู "หน้าหลัก" "สมุดเยี่ยม" "เกี่ยวกับผู้จัดทำ" "เกี่ยวกับบล็อก" และ "ติดต่อเรา" 
การสร้างเมนูหลักๆ ดังที่ผมทำให้ดูเป็นตัวอย่างตามภาพข้างบนนี้ ยังต้องมีเทคนิคเพิ่มเติม ซึ่งคงจะอธิบายในบทความตอนนี้ ไม่ได้แน่ๆ เดี๋ยวจะยาวมาก คงจะอธิบายในบทความที่เกี่ยวกับ การสร้างบล็อก ให้คล้ายเว็บไซต์ ลองติดตามอ่านกันนะครับ 
ก่อนจะจบบทความการใช้งานองค์ประกอบ "ข้อความ" ผมขออธิบายเสริมระบบการจัดการในหน้า "รูปแบบ" ไว้สักนิดหน่อยนะครับ ภาพข้างบนคือหน้า "รูปแบบ" ที่ผมเคยอธิบาย หรือกล่าวถึงไปแล้ว
ตัวอย่าง "รูปแบบ" นั้น จะมีหน้าตาของบล็อก ในส่วนข้อความดังภาพข้างบนนะครับ ที่ผมนำมาทำเป็น เมนู "หน้าแรก, เกี่ยวกับผมเอง, บล็อกอื่นที่เขียน, งานที่ทำอยู่, สั่งซื้อหนังสือ, เว็บน่าสนใจ, ชุมชนผู้พิการ, ข่าวประชาสัมพันธ์, โรคจากการเป็นผู้ทุพพลภาพ, แผลกดทับ, การดูแลสุขภาพ, การพิทักษซ์สิทธิ์" ที่มีการเชื่อมโยงลิ้งค์ มีการใส่สี และทำตัวหนา และจริงๆ แล้ว ที่เห็นว่าแต่ละข้อความมีช่องว่างนั้น ผมใช้ ... จำนวน 3 จุด เป็นตัวขั้นข้อความ และทำให้เป็นสีขาว ซึ่งพื้นของบล็อกก็เป็นสีขาว จึงทำให้มองไม่เห็น
คราวนี้มาดู วิธีการย้ายพื้นที่ของ "เมนู" ตามความเหมาะสม ซึ่งตัวอย่างนี้ผมจะยกตัวอย่างการย้าย "องค์ประกอบ" จากฝั่งซ้าย ขึ้นไปข้างบนนะครับ จากภาพดูตามลูกศร ผมกำลังจะย้ายองค์ประกอบ "ข้อความ" ไปอยู่ใต้ "ชื่อบล็อก" (โปรดสังเกต ขณะทำ ต้องไม่มีพื้นที่สีเหลือง นะครับ)
เมื่อย้ายเสร็จแล้ว จะเห็นว่า "องค์ประกอบข้อความ" ได้ย้ายไปอยู่ข้างบนแล้วนะครับ ซึ่งจะเห็นว่ามีพื้นที่ยาวขึ้น เท่ากับ "องค์ประกอบชื่อบทความ" จากนั้นให้กดปุ่ม "บันทึก" ที่มีสีส้ม ก็จะเห็นพื้นที่สีเหลืองที่ว่า เปลี่ยนแปลงเสร็จเรียบร้อยแล้ว และมีเมนู "ดูบล็อก" ถ้ากด ก็จะเห็นหน้าเว็บบล็อก ที่มีการเปลี่ยนแปลงเรียบร้อยแล้วครับ
เป็นอย่างไรบ้างครับ กับบทความเกี่ยวกับองค์ประกอบ "ข้อความ" ในตอนนี้ ยาวพอสมควรนะครับ ตอนหน้ามาติดตามอ่านรายละเอียดองค์ประกอบ "Adsense" กันนะครับ เชื่อว่าหลายๆ คนคงจะสนใจ ไม่น้อย เพราะจะทำให้บล็อกของเราสร้างรายได้ให้กับเจ้าของบล็อกด้วยครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น