สร้าง Link ให้น่าสนใจด้วย HTML Script
- Kritthanit Malathong
- Oct 5, 2024
- 1 min read
โพสต์เมื่อวันที่ 5 ตุลาคม 2567
แน่นอนว่าหลายคนที่เคยเขียนข้อความเอาไว้บนเว็บ ต้องเคยมีประสบการณ์การโพสต์ลิงค์ เพื่ออ้างอิง หรือเพิ่มไปดาวน์โหลดข้อมูลจากภายนอกเว็บของตัวเอง และการโพสต์ลิงค์ก็ทำได้หลากหลายวิธีเช่น
โพสต์ลิงค์โดยตรง
ตัวอย่างเช่น
ซึ่งจะเห็นว่ามันดูไม่ค่อยสวยงาม และไม่น่าสนใจ ดังนั้นเราจึงไม่ค่อยเห็นคนใช้วิธีนี้กันเท่าไรนัก
โพสต์ลิงค์ผ่าน HTML Scripts
ตัวอย่างเช่น
<a href="https://www.example.com" target="_blank">Click here to open in a new tab</a>เมื่อเราโพสต์ด้วยวิธีนี้ เราจะไม่เห็น URL ของเว็บแต่จะเห็นข้อความแทน ตัวอย่างเช่นหากผมใช้โค้ดตามที่แสดงด้านบนจะได้ผลลัพธ์ดังนี้
แต่เราจะใช้วิธีนี้ได้ก็ต่อเมื่อหน้าเว็บที่เราเขียน อนุญาติให้เราแทรก Html Code เข้าไปได้
แต่ถ้าหากคุณคิดว่าทั้ง 2 วิธีที่กล่าวมานั้น ก็ยังดูไม่น่าสนใจเท่าไร เพราะผลลัพธ์มันก็ยังดูธรรมดาอยู่ดี ในบทความนี้ผมมีวิธีที่จะทำให้ลิงค์ของเราดูไม่ธรรมดา นั่นก็คือวิธีที่ 3 นั่นเอง
โพสต์ลิงค์ผ่าน HTML Scripts แบบกำหนดค่าเอง
แน่นอนว่าวิธีนี้อาจฟังดูยากลำบากหากคุณต้องเขียนโค้ดเอง แต่มันจะง่ายมากหากคุณแค่ก็อปโค้ดสำเร็จรูปของผมไปใช้ และเปลี่ยนค่าแค่เล็กน้อย งั้นไปดูตัวอย่างโค้ดกันเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Preview Card with Hover Effect</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.link-card {
width: 600px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
}
.link-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.link-card img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 15px;
}
.link-card .card-content {
flex: 1;
}
.link-card h4 {
margin: 0 0 10px;
}
.link-card p {
margin: 0;
color: #666;
}
</style>
</head>
<body>
<a href="WEB_URL_HERE" class="link-card" target="_blank">
<img src="IMAGE_URL_HERE" alt="Link Thumbnail">
<div class="card-content">
<h4>ข้อความ Title</h4>
<p>คำอธิบาย</p>
</div>
</a>
</body>
</html>
โดยจุดที่คุณต้องแก้ไขมีเพียงแค่ 4 จุดตามที่ผมได้ไฮไลต์เอาไว้เท่านั้น โดยโค้ดนี้จะให้ตัวอย่างผลลัพธ์ดังนี้
Comments