เทคนิคการสร้างลิงก์ไปยังตำแหน่งที่ต้องการ ด้วยเครื่องมือ Anchor

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

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

 

1. วาง Anchor เพื่อกำหนดตำแหน่งลิงก์ปลายทาง

  • คลิกแก้ไขเมนูประเภท บทความ/สินค้า หรือเมนูประเภทอื่น ๆ ที่มี Section พื้นที่เนือหาหลัก (Section Main) หรือ Section Text จากนั้นนำเมาส์ไปชี้บริเวณมุมบนด้านขวา และคลิก "แก้ไขด้วย Text Editor

 

  • จะปรากฎหน้าต่างที่มีเครื่องมือ Text Editor ให้นำ Cursor เมาส์ไปคลิกบริเวณที่จะเป็นตำแหน่งข้อมูลปลายทางและแสดงผลทันทีเมื่อผู้ชมคลิกลิงก์

  • จากนั้นคลิกเครื่องมือ Anchor (สัญลักษณ์  ใน Text Editor Version 3 หรือ  ใน Text Editor Version 4)
     
  • ปรากฎหน้าต่างให้ตั้งชื่อเพื่อระบุตำแหน่ง Anchor นั้น และคลิก OK (หากมีการสร้าง Anchor มากกว่า 1 ตำแหน่งในหน้าเดียวกัน ห้ามใช้ชื่อซ้ำกันนะคะ)
     
  • จะแสดงสัญลักษณ์รูปสมอเรือ ที่ตำแหน่งที่ Cursor เมาส์ได้คลิกไว้ แสดงว่า เราระบุจุด Anchor สำเร็จแล้วค่ะ (อาจคลิก บันทึก เพื่อยืนยันการแก้ไขข้อมูลก่อนได้)

 

2. สร้างลิงก์เชื่อมโยงมายัง Anchor

เพื่อให้ผู้ชมสามารถคลิกลิงก์นี้ และแสดงผลตำแหน่งข้อมูลที่เราวาง Anchor ได้ทันที ด้วยการใช้เครื่องมือ "Insert/Edit Link" (สัญลักษณ์  ใน Text Editor Version 3 หรือ  ใน Text Editor Version 4) สำหรับผูกลิงก์ข้อความ หรือรูปภาพค่ะ

     2.1. กรณีตำแหน่งที่สร้าง Anchor ปลายทาง กับลิงก์ต้นทางอยู่ภายใน Section เดียวกัน 

  • เว็บมาสเตอร์สามารถพิมพ์ข้อความ หรืออัพโหลดรูปภาพที่เป็นตำแหน่งลิงก์ต้นทาง จากนั้นไฮไลท์ข้อความ หรือคลิกรูปภาพ แล้วคลิกเครื่องมือ "Insert/Edit Link"

  • จะปรากฎหน้าต่าง Insert Link ที่หัวข้อ Anchor ให้คลิกเลือกชื่อ Anchor ตำแหน่งที่ต้องการ และกด OK 
     
  • กด บันทึก เพื่อยืนยันการเปลี่ยนแปลงแก้ไขในหน้าต่าง Text Editor

 

 

      2.2. กรณีที่ตำแหน่งที่สร้าง Anchor ปลายทาง กับ Link ต้นทางอยู่กันคนละหน้า หรืออยู่ต่าง Section กัน เช่น สร้าง Anchor ใน Section Text แต่ลิงก์ต้นทางอยู่ใน Section Main เป็นต้น

  • ให้คัดลอก URL ของหน้าเว็บเพจที่ได้สร้าง Anchor ปลายทางไว้แล้ว

 

  • จากนั้นคลิกแก้ไขใน Section Main หรือ Section Text เว็บมาสเตอร์สามารถพิมพ์ข้อความ หรืออัพโหลดรูปภาพที่เป็นตำแหน่งลิงก์ต้นทาง จากนั้นไฮไลท์ข้อความ หรือคลิกรูปภาพ แล้วคลิกเครื่องมือ "Insert/Edit Link"

  • จะปรากฎหน้าต่าง Insert Link ให้วาง URL ที่คัดลอกมา ในช่อง URL  ตามด้วยสัญลักษณ์  #  และตามด้วยชื่อ Anchor ที่ตั้งไว้ (พิมพ์ติดกัน ไม่ต้องเว้นวรรค) และกด OK 
     
  • กด บันทึก เพื่อยืนยันการเปลี่ยนแปลงแก้ไขในหน้าต่าง Text Editor

 

ตัวอย่างแสดงผลการผูกลิงก์ไปยังตำแหน่งที่ต้องการด้วย Anchor

 

ดูตัวอย่างการแสดงผลลิงก์แบบ Anchor บนหน้าเว็บไซต์จริง คลิกที่นี่ ค่ะ




VelaEasy Tips

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์พร้อมใช้ VelaEasy
แนะนำขนาดรูปภาพสำหรับใส่ในเว็บไซต์ VelaEasy
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
เทคนิคการจัดการเมนูด้านบนที่สวยและดี
จัดการข้อมูลเมนูด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
แนะนำวิธีหากลืมรหัสผ่านเข้าสู่หน้าแก้ไขเว็บไซต์สำเร็จรูป VelaEasy
วิธีติดตั้งโค้ดนับจำนวนผู้เข้าชมเว็บไซต์
การติดตั้ง Facebook Page Plugin (Like Box) ในระบบ VelaEasy
วิธีแสดงผล VDO ในเว็บไซต์ VelaEasy
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์ระบบ VelaEasy กับทาง Google
วิธีติดตั้งโค้ด Google Analytics ในระบบ VelaEasy
ติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงก์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก
เทคนิคแสดงผลแบนเนอร์กิจกรรม ด้วยรูปภาพที่คุณออกแบบเอง
วิธีการแก้ปัญหา hotmail ไม่ได้รับอีเมลแจ้งรหัสผ่าน article