Blogger: ทำเมนูแบบลิงก์ด้วยรูปภาพ

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

ตัวอย่างเมนูแบบหลายสี (ถ้าลองกดดูจะพบว่าลิงก์ในแต่ละภาพแตกต่างกัน)

ตัวอย่างเมนูรูปภาพแบบ 5 ลิงก์สู่บทความภายใน Blog

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

---

ขั้นตอนที่ 1. เริ่มจากลองทำเมนูแบบภาพเดียวก่อน

โดยเมนูแบบภาพอันเดียวตามภาพตัวอย่างข้างบนนี้ถูกเขียนด้วยโค้ดว่า
<div align="center">
<table border="0" bordercolor="#000000" cellpadding="3" cellspacing="0" style="border-collapse: collapse; border: 0px; margin: 0px;"><tbody>
<tr style="text-align: center;"><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">
<a href=" http://tip.maxlayout.com/2009/11/photoscape-gif-animation.html "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJD6fLQpYm2B7EB6LpHTngz1wrTjbgId5_81oJDxcp91OlWh8JyG0WIeDK_N4r8DRb53KErOHFXCkv5PX3gqKNBCWzcfS6uk8D2Ht1_T4vtxglUGZuua5IUu3TBIo86nW9ue_JJFmiUlI/ " style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>
</td></tr>
</tbody></table>
</div>


ซึ่งมีวิธีการเขียนตามแบบด้านล่างนี้
<div align="center">

<table border="0" bordercolor="#000000" cellpadding="3" cellspacing="0" style="border-collapse: collapse; border: 0px; margin: 0px;"><tbody>

<tr style="text-align: center;"><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">

<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>

</td></tr>

</tbody></table>

</div>

และเวลานำไปใช้งานอย่าลืมแก้คำว่า URL_ของลิงก์ปลายทาง และ URL_ของภาพเมนู ในโค้ดที่กล่าวมาให้เป็น URL ของลิงก์ตามที่คุณต้องการ

โดยตัวอย่างของเมนูแบบภาพเดียวที่ทำให้ดูข้างบนก็เกิดจากการแทนที่โค้ดดังนี้
URL_ของลิงก์ปลายทาง ก็คือ
http://tip.maxlayout.com/2009/11/photoscape-gif-animation.html
URL_ของภาพเมนู ก็คือ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJD6fLQpYm2B7EB6LpHTngz1wrTjbgId5_81oJDxcp91OlWh8JyG0WIeDK_N4r8DRb53KErOHFXCkv5PX3gqKNBCWzcfS6uk8D2Ht1_T4vtxglUGZuua5IUu3TBIo86nW9ue_JJFmiUlI/

---

ขั้นตอนที่ 2. การทำให้เมนูมีลิงก์เพิ่มขึ้น

ทำให้ลิงก์รูปภาพเพิ่มขึ้นอีกหนึ่งอันด้วยการนำโค้ดในขั้นตอนที่ 1 มาแล้วก็แทนที่โค้ดใน 3 บรรทัดสุดท้ายซึ่งก็คือ

</td></tr>

</tbody></table>

</div>

โดยให้แทนที่โค้ดที่กล่าวมานั้นด้วยโค้ดตามด้านล่างนี้

</td><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">

<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>

</td></tr>

</tbody></table>

</div>

ซึ่งพอแก้ตามที่บอกแล้วก็จะกลายเป็นแบบนี้
<div align="center">
<table border="0" bordercolor="#000000" cellpadding="3" cellspacing="0" style="border-collapse: collapse; border: 0px; margin: 0px;"><tbody>
<tr style="text-align: center;"><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">
<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>
</td><td style="border: 0px; vertical-align: top;" width="auto"><div style="margin-bottom: 0px; margin-top: 0px; text-align: center;">
<a href="URL_ของลิงก์ปลายทาง"><img src="URL_ของภาพเมนู" style="border-width: 0px; height: auto; padding: 0px; width: auto;" /></a></div>
</td></tr>
</tbody></table>
</div>

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

---

ขั้นตอนที่ 3. การปรับระยะห่างของภาพในเมนู

ลองสังเกตโค้ดของขั้นตอนที่ 1 ในบรรทัดที่ 2 ซึ่งก็คือ
cellpadding="3"
โดยให้แทนที่เลข 3 ในโค้ดเพื่อเพิ่มหรือลดระยะห่างระหว่างรูปในเมนู ซึ่งถ้าต้องการให้ห่างมากขึ้นก็เพิ่มเลขให้มากกว่านี้ และถ้าอยากให้อยู่ใกล้กันก็ลดเลขให้น้อยลง

---

ขั้นตอนที่ 4. การเลือกตำแหน่งวางเมนู

ถ้าไม่ชอบเมนูแบบตั้งอยู่ตรงกลางจอ ก็สามารถเลื่อนตำแหน่งได้โดยสังเกตโค้ดของขั้นตอนที่ 1 ในบรรทัดที่ 1 ซึ่งก็คือ
<div align="center">
โดยสามารถแก้ไขโค้ดตำแหน่งที่กล่าวมาได้ดังนี้
ใช้ <div align="center"> ตามแบบเดิมเพื่อให้เมนูตั้งอยู่ตรงกลาง
ใช้ <div align="left ">  เพื่อให้เมนูตั้งชิดด้านซ้าย
ใช้ <div align="right">  เพื่อให้เมนูตั้งชิดด้านขวา