Giriş yapmadınız.

Web Siteniz İçin Modern Sosyal Medya Dropdown Menü (HTML & CSS & JS) Göz Yormayan Şık Tasarım

Sayın ziyaretçi, AllaTurkaa sitesine hoş geldiniz. Eğer buraya ilk ziyaretiniz ise lütfen yardım bölümünü okuyunuz. Böylece bu sitenin nasıl çalıştığı konusunda ayrıntılı bilgilere ulaşabilirsiniz. Eğer sitenin tüm olanaklarından faydalanmak istiyorsanız, kayıt yaptırmayı düşünmelisiniz. Bunun için kayıt formunu kullanabilir ya da bu bağlantıya giderek kayıt işlemi hakkında daha fazla bilgi alabilirsiniz. Eğer önceden kayıt yaptırdıysanız buradan giriş yapabilirsiniz.

Seyyah20

Orta Düzey

  • "Seyyah20" bir erkek
  • Konuyu başlatan "Seyyah20"

Mesajlar: 320

Kayıt tarihi: Jan 26th 2014

Konum: DENİZLİ/Gönlünüze ektiğiniz her güzellik, bir gün size bereketli bir hasat olarak dönecektir.

  • 1023
  • Özel mesaj gönder

1

Tuesday, 3.02.2026, 22:39

Web Siteniz İçin Modern Sosyal Medya Dropdown Menü (HTML & CSS & JS) Göz Yormayan Şık Tasarım

Merhaba Allaturka Forum Üyeleri ve Değerli Ziyaretçiler!
Bugün sizlerle, Arşivimde Bulduğum, web sitelerinizde veya forum sayfalarınızda kullanabileceğiniz, şık ve göz yormayan modern bir Sosyal Medya Seçici (Dropdown Menu) çalışmasını paylaşıyorum.
Kırmızı tonların ağırlığından kurtulup, daha profesyonel bir gri-siyah geçişiyle (linear-gradient) tasarımı yeniledim.


İşte bu çalışmanın özellikleri ve nasıl özelleştirebileceğinize dair bilgiler:
Özellikler ve Kullanım Rehberi
1. Hangi Sistemlere Uygun? Bu çalışma standart HTML5, CSS3 ve JavaScript kullanılarak hazırlanmıştır. Kendi web sitelerinize, kişisel bloglarınıza veya HTML desteği sunan portal sayfalarına rahatlıkla entegre edebilirsiniz.
2. Linkler Nasıl Eklenir / Değiştirilir? index.html dosyasındaki <li> etiketleri arasındaki <a> etiketlerini bularak kendi adreslerinizi ekleyebilirsiniz.
  • Örnek: <a href="KENDI_LINKINIZ" target="_blank">...</a> kısmına kendi profil linkinizi yapıştırmanız yeterli.
3. Simgeler (İkonlar) Nasıl Değişir? images/ klasörüne kendi ikonlarınızı atıp, kod içerisindeki src="images/facebook.png" gibi yolları yeni dosya adıyla güncellemeniz gerekir.
4. Renkler Nasıl Değişir? Gözü yormayan antrasit geçişini style.css dosyasındaki .hero sınıfında bulabilirsiniz:
  • background-image: linear-gradient(#2c3e50, #000000); Buradaki renk kodlarını (HEX kodları) değiştirerek kendi zevkinize göre ayarlayabilirsiniz.
5. Sayfaya Nasıl Konur?
  • style.css dosyasını sitenizin ana dizinine atın.
  • index.html içindeki kodları sayfanızın <body> etiketleri arasına yerleştirin.
  • Logonuzu ve simgelerinizi images klasöründe tutmayı unutmayın!
  • Tüm Her şeyi değiştirmekte serbestsiniz, Kısıtlama yoktur.
Dosya İçeriği Özeti
  • Üst Kısım: Allaturka Logosu (Ortalı)
  • Orta Kısım: Açılır menü şeklinde sosyal medya butonları.
  • Alt Kısım: Allaturkaa Forum | Yapımcı imzası.

*Gönül ne kahve ister ne kahvehane, gönül ahbap ister, sosyal medya sadece bahane. Dostluğumuzun baki kalması dileğiyle...*
Seyyah20 belirtilen resmi ekledi:
  • Resim-1.png
Seyyah20 belirtilen dosyaları ekledi:

Benzer konular