Sitenin Sağına Whatsapp Butonu Ekleme

Merhaba arkadaşlar benimde bir arkadaşımın sitesi için aradığım ve uzun uğraşlar sonucunda güzel bir şekilde kullandığım sitenin sağına kayan whatsapp butonu ekleme kodunu sizlerle paylaşacağım, fakat buradaki paylaşımımda oldukça anlaşılır bir şekilde ve kodlarda düzenlemeler yaparak nerede ve nasıl kullanacağınızı sırası ile sizlere anlatacağım.

Sizlerde sitenin sağına kayan whatsapp butonu, sitenin sağına kayan reklam kodu eklemek istiyorsanız aşağıdaki kodlar tamda sizlerin işine yarayacak çok basit bir koddur.Tek yapmanız gereken sırası ile işlemleri yapmak ve kendinize göre kodları düzenleyip kullanmak olacaktır.

Örnek çalışma: https://www.tarzboya.com/

Hadi Sitemize Kayan Whatsapp Butonu Ekleyelim

1- Öncelik olarak CSS kodunu sitemizin css kodları arasına ekleyelim, benim gibi blogger kullanıyorsanız blogger admin panelinde sol menüde yer alan tema sekmesine tıklayıp açılan sayfadaki özelleştir butonunun yanındaki ok işaretine tıklayarak HTML'yi düzenle bölümüne giriş yapıyoruz ve buradaki kodlar arasından ]]></b:skin> kodunu aratıp bulduktan sonra aşağıdaki css kodunu bu kodun hemen üzerine ekliyoruz.

[ .fixed-whatsapp {

position: fixed;

bottom:3%; left:0; z-index:999;} ]

Eğer blogger değilde Wordpress veya farklı bir tasarıma sahip siteniz varsa, WordPress'te ve diğer sitelerde style.css dosyasının içerisine eklemeniz gerekmektedir.CSS kodunu eklediğiniz taktirde sırada butonun sitede görünmesi için gerekli kodları eklemekte.

2- Aşağıda yer alan kodları sitenizin </body> tagının hemen üzerine ekleyiniz, blogger için önerilen admin panelindeki düzen bölümünden yeni birtane "Html/JavaScript" widgeti oluşturup içerisine eklemenizdir, wordpress'te bileşenler bölümünden "Özel Html" bileşeni içerisine ekleyebilirsiniz.

[ <a href="https://wa.me/905306838075?text=Merhaba+Siteniz+Üzerinden+Ulaşıyorum+Bilgi+Alabilirmiyim"><img class="alignnone b-loaded" style="position: fixed; bottom: 20%; right: 0; z-index: 999;" alt="" width="33" height="206" src="https://i.hizliresim.com/gqte1kq.png"></a> ]

3- Üst kısımda yer alan kodları kendinize göre düzenlerken düzenlemeniz gereken yerler kırmızı renkle işaretlenmiştir, bottom: 20% kodu butonu aşağı yukarı kaydırmaya yarar, right sağ demektir bunu left olarak değiştirirseniz buton sitenin sol tarafında gösterilir, text= bölümündeki mesajların arasında yer alan + işareti boşluk anlamına gelir, sizler mesajı düzenlerken yine kelimeler arasına + koyarak eklemelisiniz, Örnek olarak whatsapp+destek+hattımıza+hoşgeldiniz.

Son olarak src= bölümündeki resim linki ben hızlı resim sitesine yükledim fakat silinir veya herhangi bir sorun olur diye aşağıyada telefon ve whatsapp butonlarını ekliyorum resimlerin üzerine sağ tıklayıp indirip kendi sitenize yükledikten sonra kendi sitenizin linkini eklerseniz daha güvenli olacaktır.

Bu kadar basit arkadaşlar, yapamayan veya herhangi bir sorun yaşayan olursa buraya yorum yazabilirler, ayrıca bir teşekkür yorumunuda çok görmeyin, bu blog sizler için var, bilgi ve tecrübelerimi sizlerle paylaşmak bana zevk veriyor.