การสร้างเมนูลิงค์แบบรูปภาพ หรือ แบนเนอร์

แบ่งออกเป็น 3 ขั้นตอน ดังนี้

ขั้นตอนที่ 1 การเตรียมข้อมูลรูปภาพ และลิงค์

1. เปิดเว็บไซต์ที่มีแบนเนอร์ที่เราต้องการนามาทาเมนูที่เว็บของเรา ในที่ผมเปิดเว็บไซต์ สพฐ. คือ

http://www.obec.go.th
2. เลื่อนหน้าเว็บลงไปด้านล่างสุดจะพบแบนเนอร์ที่เราต้องการ
3. จากนัน้ ทาการเลือกแบนเนอร์ทีละตัว พร้อมกับจดชื่อเว็บไซต์ที่ปรากฎที่แถบด้านล่างใส่กระดาษเอาไว้ด้วย
หรือจะคลิกที่แบนเนอร์นั้นๆ เข้าไปเพื่อเปิดเว็บขึ้นมา แล้วค่อยคัดลอกที่อยู่เว็บ หรือ URL ไปเก็บไว้ที่
Word หรือ Notepad ก็ได้ดังภาพ

ในที่นี้ผมคลิกที่แบนเนอร์เพื่อเปิดเว็บขึ้นมาแล้วคัดลอก URL ไปไว้ที่โปรแกรม Notepad ดังภาพ

เสร็จแล้วบันทึกเก็บไว้ก่อนเผื่อเครื่องแฮงค์ หรือไฟดับ
3. จากนั้นทาการ Save รูปภาพแบนเนอร์มาเก็บไว้ที่เครื่อง โดยการคลิกขวาที่แบนเนอร์ แล้วเลือกคาสั่ง
Save picture as... ดังภาพ

เป็นอันเสร็จเรื่องการเตรียมข้อมูลและลิงค์

ขั้นตอนที่ 2 การสร้างข้อมูลลิงค์

1. เปิดเว็บไซต์ของตนเอง แล้วเข้าสู่ระบบ เช่น http://krurungsit.wordpress.com/wp-admin

2. ใส่ Username และ Password ของตนเอง เพื่อเข้าสู่ระบบ
3. เมื่อเข้าสู่ระบบเรียบร้อยแล้ว ให้เลือกเมนูหน้า แล้วเลือกคาสั่ง เขียนหน้าใหม่ ดังภาพ

4. จะปรากฎหน้าจอสาหรับเขียนหน้าใหม่ ขึ้นมา ให้กรอกข้อมูลที่หัวข้อหน้าที่จะเขียน พร้อมกับกดปุ่มใส่

รูปภาพ ดังภาพ
5. ทาการเพิ่มรูปภาพแบนเนอร์ที่เราเตรียมไว้เข้าไปในเว็บ โดยคลิกที่ปุ่มเลือกไฟล์ ดังภาพ

6. ทาการเลือกไฟล์จากเครื่องคอมพิวเตอร์ของเราตามโฟลเดอร์หรือไดร์ฟที่เก็บไฟล์ไว้ แล้วกดปุ่ม Open

ดังภาพ

7. เมื่อเลือกไฟล์เข้าไปแล้ว รอสักครู่จะปรากฏหน้าจอ ดังภาพ ให้เลื่อนลงไปด้านล่าง แล้วที่กดปุ่ม

ใส่เข้าไปในเรื่อง
8. เมื่อใส่ภาพเข้าไปในเรื่องแล้ว จะได้ภาพดังนี้

9. จากนั้นก็เพิ่มภาพเข้าไปอีก ตามขั้นตอนตั้งแต่ข้อ 4 - 8 จนครบจานวนภาพที่เราต้องการ ในที่นี่ผม

เพิ่มภาพจานวน 3 ภาพ ดังรูป

10. จากนั้นคลิกที่รูปภาพแต่ละภาพ แล้วกดปุ่มลิงค์ หรือ รูปโซ่ ตามขั้นตอนในภาพ

11. จากนั้นจะปรากฏหน้าจอให้ใส่ลิงค์ URL ให้เราทาการคัดลอกลิงค์ที่เราเตรียมไว้ในขั้นตอนที่ 1 ดังภาพ
(ถ้าเขียนไว้ในสมุดก็พิมพ์ลงไปในช่อง URL ได้เลย)

แล้ว นามาวางหรือพิมพ์ลงไปในช่อง URL ดังภาพ

12. จะได้ลิงค์ดังภาพ จากนั้นกดปุ่ม อัปเดต

13. ทาขั้นตอนที่ 10 – 12 จนครบตามจานวนภาพ แล้วกดปุ่ม บันทึกฉบับร่าง

14. จากนั้นกดปุม่ HTML เพื่อเปลี่ยนจอภาพเป็นแบบหน้าจอเป็นแบบซอร์สโค้ด แล้วทาการคัดลอกข้อมูล

ทั้งหมด โดยกดปุ่ม Ctr A ที่แป้นพิมพ์ หรือใช้เมาส์ระบายสีทึบก็ได้ แล้วคลิกขาวเลือกคาสั่ง Copy

15. จากนั้นไปที่เมนูรูปแบบบล็อก เลือกรายการ Widget ดังภาพ

16. เลือกหัวข้อที่ชื่อว่า ข้อความ แล้วลากไปวางที่ Sidebar ที่ต้องการ แล้วก็พิมพ์หัวข้อใส่ พร้อมวาง
ซอร์สโค้ดที่คัดลอกมาที่ช่องว่าง ดังภาพขวามือ แล้วบันทึก

17. เสร็จแล้วกลับมาดูผลงานที่หน้าแรกครับ จะได้เมนู ดังภาพ

18. ถ้าวางผิดที่ เช่น จะวางที่ Sidebar1 แต่ไปวางที่ Sidebar2 แทน วิธีแก้ไข ไม่ต้องลบ แต่ให้ลากเมนูที่วางที่
Sidebar นั้น ไปวางที่ Sidebar ที่ต้องการเลย จากภาพ เป็น Sidebar 1 เมนูไหนที่ต้องการย้ายให้ทาการ
ลากจาก Sidebar 1 ไปที่ Sidebar 2 ได้ทันที เหมือนตอนที่เราลากมาวางครั้งแรก แต่เปลี่ยนเป็นลากจาก
Sidebar1 ไปหา Sidebar2 ครับ...