WhatsApp İkonunu Web Sitesine Nasıl Eklersiniz: Adım Adım Rehber
İletişim çağında, web siteleriyle etkileşim halinde olan ziyaretçilerle hızlı bir şekilde iletişim kurmanın yollarından biri de WhatsApp ikonunu sitenize eklemektir. WhatsApp ikonu, ziyaretçilerinizin kolayca sizinle iletişime geçmelerini sağlar ve sorularını hızlı bir şekilde yanıtlamanıza olanak tanır.
Bu rehberde, web sitenize WhatsApp ikonunu nasıl ekleyebileceğinizi adım adım öğreneceksiniz.
Adım 1: HTML Dosyası Oluşturma
İlk adım olarak, WhatsApp ikonunu sitenize eklemek için bir HTML dosyası oluşturmanız gerekmektedir. Bir metin düzenleyicisi kullanarak aşağıdaki gibi bir HTML dosyası oluşturun:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp Icon</title>Açıklama:
<!DOCTYPE html>: HTML5 belgesi olduğunu belirtir.<html lang="en">: Belgenin dilinin İngilizce olduğunu belirtir.<head>: Meta bilgiler, stil dosyaları ve başlık gibi belgenin başlık kısmını içerir.<meta charset="UTF-8">: Belgenin karakter setini UTF-8 olarak ayarlar.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Mobil uyumluluğu sağlar.<title>WhatsApp Icon</title>: Sayfanın başlığını belirler.<style> /* WhatsApp İkonu */ .whatsapp-icon { position: fixed; bottom: 20%; right: -15px; /* Sabit konum */ width: 35px; /* Boyutu değiştirme */ height: 35px; /* Boyutu değiştirme */ background-color: #25d366; /* WhatsApp rengi */ color: #fff;padding: 10px; border-radius: 5px; font-weight: bold; box-shadow: 0px 0px 10pxrgba(0, 0, 0, 0.1); z-index: 9999; /* Diğer öğelerin üzerinde olacak */ transform: rotate(-90deg) translateY(-50%); /* Dikey hizalama ve ortalamak için */ cursor: pointer; /* Farenin üzerine geldiğinde el işareti görünsün */ display: flex;justify-content: center; align-items: center; } /* Online indicator */ @keyframesunique-blink-animation { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .online-indicator { position: absolute; left: -20px; /* 5px gap + 10px width of the indicator */ top: 50%; transform: translateY(-50%); width: 10px; height: 10px;background-color: #58D68D; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); animation: unique-blink-animation 1s infinite; } </style>Açıklama:
.whatsapp-icon Sınıfıposition: fixed;: İkonun sayfa boyunca sabit bir konumda kalmasını sağlar.bottom: 20%;: İkonun sayfanın altından %20 yukarıda olmasını sağlar.right: -15px;: İkonun sayfanın sağından -15px içeriye girmesini sağlar.width, height: İkonun boyutlarını ayarlar.background-color: İkonun arka plan rengini WhatsApp yeşiline ayarlar.color: Metin rengini beyaz yapar.padding: İkonun iç dolgusunu ayarlar.border-radius: İkonun köşelerini yuvarlar.font-weight: Metin kalınlığını ayarlar.box-shadow: İkona gölge efekti ekler.z-index: İkonun diğer öğelerin üzerinde olmasını sağlar.transform: İkonun 90 derece döndürülmesini ve ortalanmasını sağlar.cursor: İkonun üzerine gelindiğinde fare imlecinin el işareti olmasını sağlar.display, justify-content, align-items: İkon içindeki öğelerin merkezde hizalanmasını sağlar..online-indicator Sınıfıposition: absolute;: İkonun konumunu ikonun göreceli olarak ayarlanmasını sağlar.left, top: Gösterge simgesinin konumunu belirler.transform: Gösterge simgesinin dikey olarak ortalanmasını sağlar.width, height: Gösterge simgesinin boyutlarını ayarlar.background-color: Gösterge simgesinin arka plan rengini yeşil yapar.border-radius: Gösterge simgesinin tamamen yuvarlak olmasını sağlar.box-shadow: Gösterge simgesine gölge efekti ekler.animation: Gösterge simgesine yanıp sönme animasyonu ekler.</head> <body> <a href="https://wa.me/+905488329090/" target="_blank"class="whatsapp-icon"> <div class="online-indicator"></div> <imgsrc="https://i.hizliresim.com/i4lnm7y.png" alt="WhatsApp" style="width: 30px; height: auto;"> <!-- WhatsApp logosu eklendi --> </a> </body> </html>Açıklama:
<body>: Sayfanın gövde kısmını belirler.<a href="https://wa.me/+905488329090/" target="_blank" class="whatsapp-icon">: WhatsApp bağlantısını içeren bir bağlantı etiketi. href özniteliği ile WhatsApp numaranızın URL’sini belirler. target="_blank" özniteliği sayesinde bağlantı yeni bir sekmede açılır.<div class="online-indicator"></div>: Çevrimiçi gösterge simgesi için bir div etiketi.<img src="https://i.hizliresim.com/i4lnm7y.png" alt="WhatsApp" style="width: 30px; height: auto;">: WhatsApp logosunu gösteren bir img etiketi. src özniteliği ile logo URL’sini belirtir, alt özniteliği ile alternatif metni belirler ve style özniteliği ile logo boyutunu ayarlar.Bu açıklamalarla birlikte, her bir kod parçasının ne yaptığını ve nasıl çalıştığını daha iyi anlayabilirsiniz. Artık bu bilgileri kullanarak kendi web sitenize WhatsApp ikonunu ekleyebilirsiniz.