- Katılım
- 27 Haz 2021
- Konular
- 1,069
- Mesajlar
- 3,291
- Çözüm
- 7
- Online süresi
- 1mo 13d
- Reaksiyon Skoru
- 1,536
- Altın Konu
- 100
- TM Yaşı
- 4 Yıl 11 Ay 26 Gün
- Başarım Puanı
- 259
- MmoLira
- 2,641
- DevLira
- 12
HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
HTML VE CSS İLE SABİT/YAPIŞKAN SOSYAL MEDYA BUTONLARI YAPIMI
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="google" crossorigin="anonymous"></script> |
Ö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
HTML VE CSS İLE SABİT/YAPIŞKAN SOSYAL MEDYA BUTONLARI YAPIMI
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="google" crossorigin="anonymous"></script> </body> </html> |
| 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> |
Son düzenleme:
