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=" http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg " 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_ของภาพเมนู ก็คือ
http://lh4.ggpht.com/_HNH4qHggrsw/S5hgyO9P8JI/AAAAAAAAAx4/322ISjE0oBk/count-number-001.jpg


ขั้นตอนที่ 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">  เพื่อให้เมนูตั้งชิดด้านขวา

Post Status




3 ความคิดเห็น:

nopiron กล่าวว่า...

เขียนได้ดีครับ

Hercules กล่าวว่า...

ขอบคุณมากครับ หามานาน แล้วสามารถนำไปแผยแพร่ได้หรือไม่ครับ

Max กล่าวว่า...

สามารถนำไปเผยแพร่ได้ครับ แต่ต้องอ้างอิงแหล่งที่มาด้วยนะ

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น