Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
1

17580

Üyecik
Katılım
17 Şubat 2025
Mesajlar
2
Beğeniler
2
Merhaba. HTML ve CSS ile siteye WhatsApp iletişim butonu eklemek için gerekli kodları atar mısınız?
 
Son düzenleme:
Çözüm
7
17580 dedi:
Merhaba. HTML ve CSS ile siteye WhatsApp iletişim butonu eklemek için gerekli kodları atar mısınız?
Genişletmek için tıkla...
Küçültmek için tıkla...
Buyrun. CSS kısmını style içerisinde bulabilirsiniz.
HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp İletişim Butonu</title>
    <style>
        .whatsapp-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: white;
            border-radius: 50px;
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        }
        .whatsapp-button img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <a class="whatsapp-button" href="https://wa.me/900000000000" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp"> WhatsApp
    </a>
</body>
</html>

Stil düzenlemeleri istediğiniz şekilde değiştirebilirsiniz. Ayrıca "body" içerisindeki a tag'inin linkine kendi telefon numaranızı girmeniz gerekiyor. 905..... şeklinde devam etmeli.
Tarihe göre sırala Puana göre sırala
17580 dedi:
Merhaba. HTML ve CSS ile siteye WhatsApp iletişim butonu eklemek için gerekli kodları atar mısınız?
Genişletmek için tıkla...
Küçültmek için tıkla...
Buyrun. CSS kısmını style içerisinde bulabilirsiniz.
HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp İletişim Butonu</title>
    <style>
        .whatsapp-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #25D366;
            color: white;
            border-radius: 50px;
            padding: 10px 20px;
            font-size: 18px;
            font-weight: bold;
            text-decoration: none;
            display: flex;
            align-items: center;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        }
        .whatsapp-button img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <a class="whatsapp-button" href="https://wa.me/900000000000" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp"> WhatsApp
    </a>
</body>
</html>

Stil düzenlemeleri istediğiniz şekilde değiştirebilirsiniz. Ayrıca "body" içerisindeki a tag'inin linkine kendi telefon numaranızı girmeniz gerekiyor. 905..... şeklinde devam etmeli.
 
Artı 1 Eksi
Çözüm
7450 dedi:
Buyurun. CSS kısmını style içerisinde bulabilirsiniz.
HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>WhatsApp İletişim Butonu</title>
 <style>
 .whatsapp-button {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background-color: #25D366;
 color: white;
 border-radius: 50px;
 padding: 10px 20px;
 font-size: 18px;
 font-weight: bold;
 text-decoration: none;
 display: flex;
 align-items: center;
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
 }
 .whatsapp-button img {
 width: 24px;
 height: 24px;
 margin-right: 10px;
 }
 </style>
</head>
<body>
 <a class="whatsapp-button" href="https://wa.me/900000000000" target="_blank">
 <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp"> WhatsApp
 </a>
</body>
</html>

Stil düzenlemeleri istediğiniz şekilde değiştirebilirsiniz. Ayrıca "body" içerisindeki a tag'inin linkine kendi telefon numaranızı girmeniz gerekiyor. 905.... Şeklinde devam etmeli.
Genişletmek için tıkla...
Küçültmek için tıkla...

Teşekkür ettim hocam eline sağlık
 
Artı 0 Eksi

Benzer konular

Y
HTML/CSS CSS Diner
Mesaj
0
Görüntüleme
197
Yonga
Y
Kerim Demirkaynak
PHP mi HTML mi?
2
Mesaj
12
Görüntüleme
380
DefenderNinja
DefenderNinja
R
HTML/CSS Şablon nasıl yapılır?
Mesaj
2
Görüntüleme
349
Ömer Erten
Ömer Erten
O
  • Çözüldü
Çözüldü CSS buton efekti ilk başta mavi sonra siyah oluyor
Mesaj
9
Görüntüleme
227
brkdnmz
brkdnmz
D
Web tasarımı yapılırken eskiz çizilir mi? Nasıl çizilir?
Mesaj
1
Görüntüleme
104
yunus
yunus
ardayms
Yapay zeka ile yapılan web sitesi projesinde "Kayıt Ol" ve "Giriş Yap" butonları çalışmıyor
Mesaj
5
Görüntüleme
222
ygzasln
Y
D
  • Soru Soru
Web sitesinde kullanıcı verilerini tutmak için illa bir DBMS kullanmak gerekir mi?
Mesaj
3
Görüntüleme
181
LazJedi
LazJedi

Yeni konular

Yeni mesajlar