ปุ่มดาวน์โหลดสามารถทำให้เว็บไซต์ของคุณดูเป็นมืออาชีพมากกว่าเพียงแค่เสนอการดาวน์โหลดผ่านลิงก์ ปุ่มให้อินเทอร์เฟซที่สะอาดขึ้น และถ้าคุณรู้สึกว่าต้องการออกแบบของคุณเอง ปุ่มของคุณสามารถเป็นส่วนสำคัญของการออกแบบหน้าเว็บของคุณได้ ทำตามคำแนะนำนี้เพื่อสร้างปุ่ม HTML หรือสร้างปุ่มตามการออกแบบของคุณเอง
ขั้นตอน
วิธีที่ 1 จาก 2: การสร้างปุ่ม HTML
ขั้นตอนที่ 1 สร้างปุ่มในตัวแก้ไขโค้ด
โปรแกรมแก้ไขข้อความอย่างง่าย เช่น Notepad หรือ TextEdit จะทำงานได้อย่างสมบูรณ์ ป้อนรหัสต่อไปนี้ในโปรแกรมแก้ไข:
ขั้นตอนที่ 2 อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ
หากคุณต้องการเสนอไฟล์ให้ดาวน์โหลด คุณจะต้องโฮสต์ไฟล์นั้นบนเซิร์ฟเวอร์ของคุณเองหรือชี้ปุ่มไปที่ไฟล์ที่อื่นบนเว็บ ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานบนเซิร์ฟเวอร์ของเว็บไซต์ของคุณ
ขั้นตอนที่ 3 ตรวจสอบให้แน่ใจว่าคุณได้รับอนุญาตจากผู้ดูแลเว็บ หากคุณต้องการเชื่อมโยงไปยังไฟล์ที่คุณไม่ได้โฮสต์เอง
ขั้นตอนที่ 4 แทนที่ 'ดาวน์โหลดตำแหน่ง' ด้วย URL ที่จะดาวน์โหลด ตรวจสอบให้แน่ใจว่าได้ใส่เครื่องหมายคำพูดเดี่ยวรอบๆ ที่อยู่ รวมทั้งเครื่องหมายคำพูดคู่รอบๆ “window.location='Download Location'" รวมคำนำหน้าใดๆ เช่น HTTP:// หรือ FTP:// และรวมถึงนามสกุลไฟล์ด้วย เช่น เป็น-j.webp" />
ขั้นตอนที่ 5. ติดป้ายกำกับปุ่ม
แทนที่ "ข้อความปุ่ม" ด้วยคำที่คุณต้องการให้ปรากฏบนปุ่ม อย่าลืมใส่เครื่องหมายอัญประกาศคู่รอบข้อความ ให้ข้อความปุ่มมีขนาดเล็กเพื่อให้ปุ่มไม่ใหญ่และเทอะทะบนหน้า
ขั้นตอนที่ 6 วางรหัสในหน้าของคุณ
คุณสามารถแทรกโค้ดปุ่มที่ใดก็ได้ในเนื้อหาของหน้าเว็บ และปุ่มนั้นจะปรากฏที่ตำแหน่งนั้น อัปโหลดโค้ดของหน้าเว็บที่เปลี่ยนแปลง และทดสอบปุ่มใหม่ของคุณ
วิธีที่ 2 จาก 2: การสร้างปุ่มรูปภาพ
ขั้นตอนที่ 1. ออกแบบปุ่มดาวน์โหลดของคุณ
ใช้โปรแกรมแก้ไขรูปภาพที่คุณต้องการ และสร้างปุ่มที่ตรงกับสไตล์เว็บไซต์ของคุณ คุณสามารถทำให้ปุ่มมีขนาดเล็กหรือใหญ่เท่าที่คุณต้องการ
ขั้นตอนที่ 2 อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณและรูปภาพปุ่ม
หากคุณต้องการเสนอไฟล์ให้ดาวน์โหลด คุณจะต้องโฮสต์ไฟล์นั้นบนเซิร์ฟเวอร์ของคุณเองหรือชี้ปุ่มไปที่ไฟล์ที่อื่นบนเว็บ ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานบนเซิร์ฟเวอร์ของเว็บไซต์ของคุณ
อัปโหลดรูปภาพปุ่มไปยังตำแหน่งเดียวกันบนเซิร์ฟเวอร์กับหน้าที่คุณกำลังวาง
ขั้นตอนที่ 3 สร้างรหัสดาวน์โหลดของคุณ
ปุ่มดาวน์โหลดที่แสดงโดยรูปภาพทำงานในลักษณะเดียวกับที่ลิงก์อื่นๆ ทั้งหมดทำงานใน HTML คัดลอกโค้ดต่อไปนี้ลงในโปรแกรมแก้ไขที่คุณต้องการ:
ขั้นตอนที่ 4 ป้อนข้อมูลไฟล์และรูปภาพของคุณ แทนที่ "ตำแหน่งดาวน์โหลด" ด้วย URL แบบเต็มสำหรับการดาวน์โหลดของคุณ รวมถึงคำนำหน้า HTTP:// หรือ FTP:// แทนที่ "ไฟล์รูปภาพ" ด้วยชื่อไฟล์สำหรับรูปภาพปุ่มดาวน์โหลด หากไฟล์อยู่ในตำแหน่งเดียวกับเพจบนเซิร์ฟเวอร์ของคุณ คุณไม่จำเป็นต้องใส่ที่อยู่ทั้งหมด
- แทนที่ "Hover Text" ด้วยข้อความใดๆ ที่คุณต้องการให้ปรากฏเมื่อผู้ใช้วางเคอร์เซอร์เหนือรูปภาพ
- แทนที่ "X" และ "Y" ด้วยความกว้างและความสูงของรูปภาพตามลำดับเป็นพิกเซล
- ตรวจสอบให้แน่ใจว่าได้ใส่เครื่องหมายคำพูดคู่รอบแต่ละรายการ
ขั้นตอนที่ 5. ป้อนรหัสลงในหน้าของคุณ
วางรหัสในตำแหน่งที่คุณต้องการให้ปุ่มของคุณปรากฏ อัปโหลดโค้ดใหม่ แล้วโหลดหน้าเว็บเพื่อให้แน่ใจว่าปุ่มใช้งานได้ ตรวจสอบว่าโหลดข้อความโฮเวอร์และรูปภาพมีขนาดที่เหมาะสม
วิดีโอ - การใช้บริการนี้ อาจมีการแบ่งปันข้อมูลบางอย่างกับ YouTube
คำเตือน
- การอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณเองเป็นวิธีที่ดีกว่าในการแชร์ไฟล์ทางออนไลน์ แทนที่จะต้องพึ่งพาเว็บไซต์อื่นๆ ในการโฮสต์ไฟล์ หากคุณคัดลอกตำแหน่งลิงก์จากเว็บไซต์อื่น ปุ่มดาวน์โหลดที่คุณสร้างจะใช้งานได้ตราบใดที่ตำแหน่งลิงก์ยังทำงานอยู่
- ห้ามอัปโหลดไฟล์ที่ละเมิดกฎหมายลิขสิทธิ์เพราะอาจทำให้ต้องเสียค่าปรับหนักหรือจำคุก
- ทดสอบปุ่มดาวน์โหลดของคุณหรือลิงก์ดาวน์โหลดบนเว็บไซต์ที่คุณได้รับตำแหน่งลิงก์เป็นระยะ เพื่อให้แน่ใจว่าผู้ใช้จะสามารถดาวน์โหลดไฟล์ได้เมื่อพวกเขาคลิกที่ปุ่ม แทนที่จะไปที่ลิงก์เสียที่ไม่มีไฟล์อยู่อีกต่อไป.
