HTML, CSS, மற்றும் JavaScript பயன்படுத்தி ஸ்டிக்கி (Sticky) சமூக ஊடக பட்டியை உருவாக்குவது எப்படி
இன்றைய இணையதளங்களில், சமூக ஊடகங்கள் வலைத்தளப் பயனாளர்களுக்கு அணுக எளிமையாக ஒரு ஸ்டிக்கி சமூக ஊடக பட்டி (Sticky Social Media Bar) முக்கியமானதாக இருக்கிறது. இது பக்கத்தில் தொடர்ந்து இருந்துகொண்டு, பயனர்களை உங்கள் சமூக ஊடக பக்கங்களுக்கு திருப்ப உதவும். இந்த பதிவில், HTML, CSS, மற்றும் JavaScript பயன்படுத்தி ஸ்டிக்கி சமூக ஊடக பட்டியை எப்படி உருவாக்குவது என்று காண்போம்.
கட்டமைப்பு (HTML)
முதலில், HTML மூலம் சமூக ஊடக பட்டியின் அடிப்படை அமைப்பை உருவாக்குவோம்.
<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ஸ்டிக்கி சமூக ஊடக பட்டி</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="social-bar">
<a href="https://www.facebook.com" target="_blank" class="social-icon facebook">Facebook</a>
<a href="https://www.twitter.com" target="_blank" class="social-icon twitter">Twitter</a>
<a href="https://www.instagram.com" target="_blank" class="social-icon instagram">Instagram</a>
<a href="https://www.linkedin.com" target="_blank" class="social-icon linkedin">LinkedIn</a>
</div>
<script src="script.js"></script>
</body>
</html>வடிவமைப்பு (CSS)
CSS மூலம் சமூக ஊடக பட்டியை அழகாகவும், ஸ்டிக்கியாகவும் மாற்றுவோம்.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.social-bar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #333;
border-radius: 0 5px 5px 0;
overflow: hidden;
z-index: 1000;
}
.social-icon {
display: block;
width: 50px;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
background-color: #444;
text-decoration: none;
transition: background-color 0.3s;
font-size: 20px;
font-weight: bold;
}
.social-icon:hover {
background-color: #555;
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.instagram {
background-color: #e4405f;
}
.linkedin {
background-color: #0077b5;
}செயல்பாடு (JavaScript)
JavaScript பயன்பாட்டை இங்கு மிக எளிமையாகவே வைத்துள்ளோம், ஏனெனில் இந்த சிக்கலான மாற்றங்களுக்கு CSS-யே போதுமானது.
// JavaScript is not strictly necessary for the basic sticky bar functionality,
// but you can add interactivity here if needed in the future.
