Bu yazımda, Html ve Css kullanarak sabit/yapışkan sosyal medya butonlarının nasıl yapıldığını öğreneceğiz. Her geçen gün sosyal medya kullanıcılarının artmasıyla birlikte web sitelerinde bulunan sosyal medya butonları da artık olmazsa olmazlarımız arasındaki yerini aldı.
Sosyal medya butonlarının, sitenizin ziyaretçi sayısını ve ziyaretçinin sitenizdeki etkileşimini arttırmada ne kadar etkili bir araç olduğu tartışılmaz bir gerçek.
Sosyal medya butonları ile ilgili birçok hazır eklenti bulunuyor. Bunları kullanmak yerine kendiniz hızlıca kodlayıp tasarımlarınıza yerleştirebilirsiniz.
⇒ Tasarımımızda ikonlar için Fontawesome‘ı CDN olarak ekliyoruz.
Fontawesome’ın son sürümünü CDN olarak kullanabilmek için sitesinden kayıt olup sonrasında gerekli CDN kodunu alabiliyoruz.
Siz de kayıt olup sizin için oluşturulan CDN kodunu sayfanıza eklemelisiniz.
|
1 2 3 |
<script src="https://kit.fontawesome.com/sizin-id-niz-gelecek.js" crossorigin="anonymous"></script> |
Örneğimizin son hali aşağıdaki gibi olacak.
Örneğimizde 6 farklı sosyal medya ikonunu kullandım. Eğer farklı sosyal medya butonları da oluşturmak isterseniz, oluşturmak istediğiniz ikonların kodlarını ve renklerini kullanmalısınız. Tasarımlarınız için aşağıdaki sosyal medya ikonlarını kullanabilirsiniz.
- youtube
- snapchat
- skype
- android
- dribbble
- vimeo
- tumblr
- vine
- foursquare
- stumbleupon
- flickr
- yahoo
Artık kodlarımızı yazmaya başlayabiliriz.
Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı
Html kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <title>Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı</title> </head> <body> <div class="social-media-btn"> <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a> <a href="#" class="twitter"><i class="fab fa-twitter"></i></a> <a href="#" class="google"><i class="fab fa-google"></i></a> <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="instagram"><i class="fab fa-instagram"></i></a> <a href="#" class="pinterest"><i class="fab fa-pinterest-p"></i></a> </div> <div class="content"> <h1>Sabit/Yapışkan Sosyal Medya Butonları</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <script src="https://kit.fontawesome.com/sizin-id-niz-gelecek.js" crossorigin="anonymous"></script> </body> </html> |
Css kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<style> body { background-color: #f5f5f5; margin: 0; height: 3000px; } .social-media-btn { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .social-media-btn a { display: block; text-align: center; padding: 14px; transition: all 0.3s ease; color: white; font-size: 18px; } .social-media-btn a:hover { opacity: 0.8; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .instagram { background: #125688; color: white; } .pinterest { background: #cb2027; color: white; } .content { margin-left: 65px; } </style> |
Umarım “Html ve Css ile Sabit/Yapışkan Sosyal Medya Butonları Yapımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Yeni bir yazımda görüşmek üzere.
