snippets
by
Admin
Desember 01, 2019
Membuat link sosial media mengambang di kiri layar menggunakan HTML dan CSS
Download bahan yang diperlukan
Download icon fontawesome pada link berikut ini (disini), setelah di download kemudian ekstract file fontawesome.rar dan pindahkan folder fontawesome ke dalam project yang anda buat
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SOSIAL MEDIA FIXED</title>
<!--style css-->
<link rel="stylesheet" href="style.css" type="text/css"/>
<!--import ini untuk mengambil icon sosial media-->
<link rel="stylesheet" href="fontawesome/css/all.css" type="text/css">
</head>
<body>
<div class="sosial-media-fixed">
<ul>
<li><a href="#" class="fb"><i class="fab fa-facebook"></i></a></li>
<li><a href="#" class="ig"><i class="fab fa-instagram"></i></a></li>
<li><a href="#" class="wa"><i class="fab fa-whatsapp"></i></a></li>
<li><a href="#" class="tl"><i class="fab fa-telegram"></i></a></li>
</ul>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Verdana', sans-serif;
background: #ddd;
}
.sosial-media-fixed {
position: fixed;
top: 50%;
left: 0;
transform: translate(-0%, -50%);
}
.sosial-media-fixed ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
padding: 5px;
}
.sosial-media-fixed ul li {
width: 40px;
height: 40px;
line-height: 40px; /* line height samakan dengan height dan width nya */
margin-bottom: 5px;
}
/* menghilangkan margin bottom pada tag li terakhir */
.sosial-media-fixed ul li:last-child {
margin-bottom: 0;
}
.sosial-media-fixed ul li a {
display: block;
width: 100%;
text-align: center;
height: 100%;
color: #ffffff;
font-size: 14px;
}
/* css background di bawah ini akan memberikan warna sesuai dengan warna masing masing sosial media */
.sosial-media-fixed ul li a.fb {
background: #1877f2;
}
.sosial-media-fixed ul li a.ig {
background: #c32aa3;
}
.sosial-media-fixed ul li a.wa {
background: #25d366;
}
.sosial-media-fixed ul li a.tl {
background: #0088cc;
}
Bagaimana cara menambahkan icon sosial media baru?
Copy paste kode ini, kemudian tempatkan dibawahnya atau dimanapun anda inginkan
<li><a href="#" class=""><i class=""></i></a></li>
Kemudian cari icon nya pada website fontawesome, ikuti link berikut ini (klik disini)
Misalkan saya akan menambahkan icon pinterest, copy yang saya lingkari pada gambar di bawah ini
Dan kode nya akan menjadi seperti ini
<li><a href="#" class="pt"><i class="fab fa-pinterest"></i></a></li>
Jangan lupa untuk menambahkan class pada tag a, misalkan saya menambahkan class pt, yang saya singkat artinya pinterest. kemudian buat lagi css untuk membuat warna background yang berbeda, jika pada tag a saya beri class pt maka kode nya menjadi seperti berikut ini
.sosial-media-fixed ul li a.pt {
background: /* kode warna disini */;
}
Posting Komentar
0 Komentar