Teknoloji

WhatsApp HTML Kodu – Siteye Telefon Arama Butonu Ekleme

WhatsApp HTML Kodu – Siteye Telefon Arama Butonu Ekleme

WhatsApp HTML kodu ve web sitesine telefon arama butonu ekleme nasıl yapılır için kolay ve basit yöntemleri aşağıda resimli anlatım olarak görebilirsiniz. HTML kodlarına ek CSS kodları da eklenecektir. Dilerseniz CSS kodlarını almayarak sadece HTML olarak yapıştırabilirsiniz. Ayrıca CSS kodlarını web sitenizin görünümüne göre güncelleyebilirsiniz.

Yazının en altında siteye bütün WhatsApp telefon arama HTML CSS kodları açıklamasız kopyala yapıştır yapabilmeniz için verilmiştir. Hiçbir şey yapmadan gerekli yerlere bu kodları yapıştırırsanız, telefon ve whatsapp butonları sitenize sabitlenecektir. Bilinmesi gereken, CSS kodları her düzenlendiğinde tarayıcınn önbelleği temizlenmelidir ki yeni yapılan CSS ayarları ekrana çıksın. Aksi durumda doğru çıktı vermez.

Butonların resimleri yukarıda olduğu gibi görülmelidir. Sorun yaşadığınız yerde yorum kısmından bize ulaşabilirsiniz, yardımcı olabiliriz. Şimdi resimli butonlar nasıl eklenir yapılır formatı nedir tıklamalı gibi uygulamalara geçelim.

Web Sitesine WhatsApp Ekleme

<a href=”https://wa.me/905555555555″></a> Bu sadece HTML whatsApp kodu arayanlar içindir.

Siteye resimli Whatsapp butonu eklemek için HTML kodları aşağıda açıklaması ile verilmiştir.

<div id=”topfix”>
<a class=”wpp” href=”https://wa.me/905555555555?text=%20Tıkladığında otomatik yazılan mesaj.” target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a> </div>

  1. <div id=”topfix”> Div tagı içinde yazan id=”topfix” CSS kodlarıdır. <a class=”wpp” içindeki class=”wpp” de CSS kodları içindir. İsterseniz CSS için yazılanları silebilir ya da CSS kodlarını hiç almadan hepsini yapıştırıp devam edebilirsiniz.
  2. Target=”_blank” sitedeki whatsapp butonuna tıklandığında mevcut sayfaya ek yeni bir sekme açılması için yazılmıştır. Yeni bir sekmede açılmasını istemiyorsanız, Tıkladığında otomatik yazılan mesaj.”><img olarak değiştirmelisiniz.
  3. Tıklandığında otomatik yazılan mesaj whatsapp ekranına geldiğinde mesaj alanında kişinin yazmadığı sizin yazılmasını istediğiniz otomatik mesajdır. Orayı istediğiniz gibi değiştrebilirsiniz: örneğin, Merhabalar mağazımıza hoşgeldiniz, ya da hangi telefona ürüne bakmıştınız, gibi mesajları yazdırabilirsiniz.
  4. <img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a> alanı ekradanki whatsapp butonunun resimli olması içindir. Oradaki url kısmına whatsapp için görünmesini istediğiniz fotoğrafın url’sini yapıştırmalısınız.
  5. Hali hazırdaki bir div tagı içine eklemek istiyorsanız, sadece <a> …………  </a> tagını kopyala yapıştır yapmanız yeterlidir.
  6. Telefon numarası örnek olarak yazılmıştır. Başında 9 olmak şartıyla telefon numarasını değiştirmeyi unutmayın.

Web Siteye Telefon Arama Butonu Eklemek

<a href=”tel:905555555555″></a> Bu sadece telefon yönlendirme HTML kodu arayanlar içindir.

Web sitesine telefon eklemek ve buton arama yapmak için kodlar aşağıda açıklaması ile bulunur.

<div id=”topfix”>
<a class=”telefonn” href=”tel:905555555555″ target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/></a>
</div>

  1. <div id=”topfix”> Div tagı içinde yazan id=”topfix” CSS kodlarıdır. <a class=”telefonn” içindeki class=”telefonn” da CSS kodları içindir. İsterseniz CSS için yazılanları silebilir ya da CSS kodlarını hiç almadan hepsini yapıştırıp devam edebilirsiniz.
  2. Target=”_blank” sitedeki hemen ara telefon butonuna tıklandığında mevcut sayfaya ek yeni bir sekme açılması için yazılmıştır. Farklı bir sekmede açılmasını istemiyorsanız, Tıkladığında otomatik yazılan mesaj.”><img olarak değiştirebilirsiniz.
  3. <img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/></a> alanı ekradanki telefon buton resminin görünmesi içindir. Oradaki url kısmına telefon butonu olarak görünmesini istediğiniz fotoğrafın url’sini yapıştırmalısınız.
  4. Hali hazırdaki bir div tagı içine eklemek istiyorsanız, sadece <a> …………  </a> tagını kopyala yapıştır yapmanız yeterlidir.
  5. Telefon numarası örnek olarak yazılmıştır. Başında 9 olmak şartıyla telefon numarasını değiştirmeyi unutmayın.

Web Siteye WhatsApp ve Telefon Ekleme Yanyana

Yukarıda whatsapp ve telefon butonlarını eklemek ayrı ayrı verdim. Şimdi bu iki butonu web sitesinde aynı anda gösterip yan yana resimli koymayı göstereceğim. Ayrıca bu butonları kolaylık olması adına hem sitenin en üstüne hem de en altına sabitleyeceğim. İsteğe göre değiştirebilirsiniz.

Burası web sitenin üst kısmında görünen whatsapp ve telefon hemen ara buton HTML kodlarıdır.

<div id=”topfix”>
<a class=”wpp” href=”https://wa.me/905555555555?text=%20Tıkladığında otomatik yazılan mesaj” target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a>
<a class=”telefonn” href=”tel:905555555555″ target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/></a>
</div>

Burası web sitesinin en altında görünen telefon arama ve whatsapp butonlarının HTML kodları.

<div class=”telno”>
<a class=”wp” href=”https://wa.me/905555555555?text=%20Tıkladığında otomatik yazılan mesaj” target=”_blank”>7/24 <img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a>

<a class=”telefon” href=”tel:905555555555″ target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/> ARA </a>
</div>

  1. Detay yapmayacağım CSS kodlarını ve div taglarını istemiyorsanız class=”…” ve  id=”…” yazan yerleri silmelisiniz.
  2. Web sitesindeki telefon ya da WhatsApp butonlarından birine tıklandığından yeni sekmede açılmasını istemiyorsan target taglarını kaldırmalısınız. Yani, otomatik mesaj alanı”><img olarak değiştireceksiniz. Sadece target=”_blank” silinmelidir, gerisi aynı.
  3. Oto mesaj yazılmasını istemiyorsanız, <a class=”wp” href=”https://wa.me/905555555555″ target=”_blank”> bu şekilde değiştireceksiniz, devamı aynı.
  4. Ara ve 7 / 24 alanını manuel istediğiniz gibi yazarak değiştirebilirsiniz.
  5. Sadece alt ya da üst kısımda görünmesini istiyorsanız, hangi kısım tercihiniz ise sadece o alanın HTML kodlarını kopyalayıp yapıştırmalısınız. Diğer buton için verilen HTML kodlarını almamalısınız.

Web Sitesine WhatsApp ve Telefon Butonu İçin CSS Kodları

Siteye Whatsap telefon butonları ekleme için CSS kodlarını alırken açıklamaları silmeyi unutmayın. Bazı kodların başında ( . ) nokta olur, bazılarının arasında ( , ) virgül var dikkat edilmelidir.

  1. #topfix{   Burası sitenin üst kısmında HTML kod butonları için CSS’tir.
  2. position:fixed;   bu kod butonları ekrana sabitler.
  3. text-align:center; bu butonları ortalar. Resmin sitenin solunda görünmesi için left sağında görünmesi için right olarak değiştirebilirsiniz.
  4. top:155px; Bu butonların yukarıdan ne kadar boşluk bırakılması içindir. Yaptıktan sonra menü üstüne geliyorsa vs, 155px yazan yeri, 140px; 170px; gibi rakamlarla değiştirerek deneme yanılma yoluyla düzenleyebilirsiniz.
  5. z-index:9922; Burası butonların her şeyden öncelik olması içindir. Yani ekranı aşağı yukarı nereye kaydırırsa kaydırsın bu buton kaybolmayacaktır. Önceliği kaybetmek için 1 yapabilir ya da burayı komple silebilirsiniz.
  6. margin:auto; Burası sağdan soldan aşağıdan yukarıdan otomatik boşluğu ayarlar. Otomatik ayarlanmasını istedim karışmazsanız daha iyidir.
  7. width:100%; Ekranın yüzde yüzü üzerinden değerlendirme alsın istedim. Karışılmazsa daha iyi olur.
  8. }

 

  1. #topfix img{ üst kısımdaki buton resimleri için CSS kodları.
  2. margin-left:8px;  Soldan 8px boşluk istemişim. 8px yazan yerin sayısını isteğe göre değiştirebilirsiniz.
  3. width:58px; fotoğrafın genişliğidir. isteğe göre sayı değiştirilebilir.
  4. height:auto; fotoğrafın otomatik yüksekliğidir. böyle olması daha iyidir.
  5. }

 

  1. .telno img{  Yapıştırırken .telno başında nokta olmasına dikkat edin. Sitenin altında görünen whatsapp ve arama resim butonları için CSS kodları
  2. width:46px;   genişlik ayarı
  3. height:auto; yükseklik ayarı
  4. margin:auto;  buna karışılmaması daha iyidir.
  5. padding-bottom:4px;  butonun alttan boşluğudur. isteğe göre sadece sayı değiştirilebilir.
  6. margin-top:3px; Arama ve whatsapp butonlarının üstten boşluğudur. İsteğe göre sadece sayı değiştirilebilir.
  7. }

 

  1. .wpp img, .wp img{ bu whatsapp butonları için hafif oval görüntü verir. İsterseniz bunu kaldırabilir ya da rakamı değiştirerek düzeltme yapabilirsiniz.
  2. border-radius:30px;
  3. }

 

  1. .telno a{  Yapıştırırken .telno başında nokta olmasına dikkat edin Alt kısımdaki telefon buton görseli için ayarlar.
  2. padding:5px; her yönden 5px düzeltmedir. İsteğe göre sadece sayı değiştirerek düzenleme yapılır.
  3. color: #222; Butonun yanında yazan yazının rengidir. Renk kodları ile değiştirilebilir.
  4. font-size:22px; Telefon numarası ve WhatsApp butonlarının yanında yazan yazının büyüklüğüdür.
  5. }

 

  1. .telno{position: fixed;  Alt kısımdaki butonların ekrana sabitliği içindir.
  2. text-align: center; butonları ekrana ortalar.
  3. bottom: 0px;  Ekranın en altında görünmesi içindir. Orada sıfırpx yazıyor.
  4. width: 100%; Böyle kalması iyidir.
  5. z-index: 999; Butonları aşağı yukarı kaydırma da hep gösterir. Kaldırılabilir ya da 1++++++ gibi sayısal değerler değiştirilir.
  6. height: auto; böyle kalmalı
  7. margin:auto; böyle kalmalı.
  8. background:#fff; Butonların arka planı içindir. Arka plan beyaz görünür, arka planda bir şey olmaması için bu kaldırılabilir. Farklı renk olması için CSS renk kodu değiştirilmelidir.
  9. }

WhatsApp Telefon Ara Butonları İçin Kopyala Yapıştır HTML CSS Kodları

Siteye telefon whatsapp ekleme için HTML kodları.

Header.php içindeki </header> bu şekilde yazan yerin hemen üstüne yapıştırmanız yeterlidir.

Sitenin altında ve üstünde görünür. Butonlar sadece site üstünde görünsün istiyorsanız, <div class=”telno”></div> kısmını komple silmelisiniz. Sadece web site altında telefon WhatsApp yönlendirme butonu görünsün istiyorsanız, <div id=”topfix”> </div> HTML kodlarını silebilirsiniz.

<div id=”topfix”>
<a class=”wpp” href=”https://wa.me/905555555555?text=%20Tıkladığında otomatik yazılan mesaj üst whatsapp” target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a>
<a class=”telefonn” href=”tel:905555555555″ target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/></a>
</div>

<div class=”telno”>
<a class=”wp” href=”https://wa.me/905555555555?text=%20Tıkladığında otomatik yazılan mesaj alt whatsapp” target=”_blank”>7/24 <img src=”https://piamet.com/wp-content/uploads/2022/05/whatsapp.png”/></a>
<a class=”telefon” href=”tel:905555555555″ target=”_blank”><img src=”https://piamet.com/wp-content/uploads/2022/05/telefon.png”/> ARA </a>
</div>

Butonlar İçin Açıklamasız CSS

Stil dosyasının içine whtsapp ve telefon ara için CSS kodları kopyala yapıştır yapılması yeterlidir. Sadece sitede alt ya da üst buton yapılacaksa da hepsini yapıştırabilirsiniz.

#topfix{
position:fixed;
text-align:center;
top:155px;
z-index:9922;
margin:auto;
width:100%;
}

#topfix img{
margin-left:8px;
width:58px;
height:auto;
}

 

.telno{position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
z-index: 999;
height: auto;
margin:auto;
background:#fff;
}

.telno img{
width:46px;
height:auto;
margin:auto;
padding-bottom:4px;
margin-top:3px;
}

.wpp img, .wp img{
border-radius:30px;
}

.telno a{
padding:5px;
color: #222;
font-size:22px;
}

Siteye Telefon Whatsapp Eklemek

Tekrar belirtmek gerekirse bütün kodları olduğu gibi yapıştırdığınızda sorun yaşıyorsanız yorum kısmına sorunu yazarsanız yardımcı olabilirim. Bu HTML CSS kodlarıyla Web sitesine WhatsApp telefon arama butonu eklemesi yaparken resimleri ve görüntüsü sitenin en üstündeki gibi olmalıdır.


YORUMLAR (İLK YORUMU SİZ YAZIN)

ÜYE GİRİŞİ

KAYIT OL