SEO SORGULA
Giriş Yap/Üye Ol
reklam

WhatsApp İletişime geç Kodu

Seo Teknoloji 23.Mar.2022 233 görüntülenme 0 yorum

WhatsApp html button

WhatsApp Bağlantı Linki

 

https://wa.me/905001234567

905001234567 : Telefon numarası. WhatsApp telefon numaraları 212, 216, 312 vb. şehirlerarası kodlar kullanılabilinir ama ülke kodunun başına + eklenerek kullanılamaz.

 

WhatsApp HTML Kodu

 

<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"></a>

 

 

WhatsApp Resimli HTML Kodu

 

<a href="https://wa.me/905001234567" rel="nofollow" target="_blank"><img src="RESİM URL" /></a>

 

 

Sayfa Kenarında Kayan WhatsApp Resimli HTML Butonu Kodu 

<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="https://wa.me/905001234567" rel="nofollow" target="_blank" title="WhatsApp"><img src="RESİM URL" /></a>

 

 

WhatsApp Animasyonlu Destek Butonu Kodu

 

<div id="whatsapp-widget" class="ww-right ww-normal ww-yes">  <a target="_blank" href="https://wa.me/905001234567/" class="ww-text">Nasıl yardımcı olabiliriz?<div class="ww-arrow"></div></a>

  <div class="ww-icon">

  <div>

    <a class="ww-icon-link" target="_blank" href="https://wa.me/905001234567/">

      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">

        <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" fill-rule="evenodd"></path>

      </svg>

    </a>

    </div>  </div> </div><style>

  #whatsapp-widget {

    position: fixed;

    bottom: 20px;

    height: max-content;

    display: flex;

    align-items: center;

    gap: 20px;

    z-index: 99999999;

    visibility: hidden;

    transition: all 2s ease 0s;

  }

  #whatsapp-widget.ww-yes {

    visibility: visible;

  }

  #whatsapp-widget.ww-no {

    visibility: hidden !important;

  }

  #whatsapp-widget .ww-icon {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    opacity: 0;

    animation: grow 3s;

    animation-delay: 1s;

    animation-fill-mode: forwards;

  }

  #whatsapp-widget .ww-link {

    opacity: 1;

    display: block;

    bottom: -15px;

    text-align: center;

    white-space: nowrap;

    text-decoration: none;

    width: 60px;

    font-family: Roboto, "Helvetica Neue", sans-serif;

    font-size: 11px;

    line-height: 11px;

    border: 0px;

    max-width: inherit;

    color: rgb(175, 175, 175) !important;

  }

  #whatsapp-widget .ww-link:hover {

    border: 0px;

    text-decoration: underline !important;

    color: rgb(175, 175, 175) !important;

  }

  #whatsapp-widget .ww-text {

    border-radius: 8px;

    border: 1px solid #e2e2e2;

    cursor: pointer;

    word-break: break-word;

    background: white;

    padding: 1rem;

    position: relative;

    box-shadow: 2px 2px 15px 2px rgb(0 0 0 / 17%);

    opacity: 0;

    animation: slide 1s;

    animation-delay: 3s;

    animation-fill-mode: forwards;

    margin-bottom: 15px;

    z-index: 100;

  }

  #whatsapp-widget .ww-arrow {

    position: absolute;

    background: white;

    border-right: 0.5px solid #e2e2e2;

    border-bottom: 0.5px solid #e2e2e2;

    top: 50%;

    width: 20px;

    height: 20px;

    z-index: -100;

  }

  #whatsapp-widget.ww-right .ww-arrow {

    transform: translateY(-50%) rotate(-45deg);

    right: -11px;

    left: unset;

  }

  #whatsapp-widget.ww-left .ww-arrow {

    left: -11px;

    right: unset;

    transform: translateY(-50%) rotate(135deg);

  }

  #whatsapp-widget.ww-big .ww-text {

    font-size: 23px;

    line-height: 25px;

  }

  #whatsapp-widget.ww-medium .ww-text {

    font-size: 20px;

    line-height: 22px;

    padding: 15px;

  }

  #whatsapp-widget.ww-normal .ww-text {

    font-size: 17px;

    padding: 12px;

    line-height: 19px;

  }

  #whatsapp-widget svg {

    fill: rgb(255, 255, 255);

    z-index: 1;

    border-radius: 50px;

    cursor: pointer;

    transition: transform 0.7s ease-in-out;

    width: 100%;

    height: 100%;

    stroke: none;

  }

  #whatsapp-widget svg:hover {

    transform: rotate(720deg);

  }

  #whatsapp-widget.ww-right .ww-text::after {

    right: -10px;

    transform: translateY(-50%) rotate(-45deg);

  }

  #whatsapp-widget.ww-left .ww-text::after {

    left: -10px;

    transform: translateY(-50%) rotate(135deg);

  }

  #whatsapp-widget.ww-left {

    left: 20px;

    flex-direction: row-reverse;

  }

  #whatsapp-widget.ww-right {

    right: 20px;

    flex-direction: row;

  }

  #whatsapp-widget .ww-icon-link {

    padding: 5px;

    box-sizing: border-box;

    border-radius: 50%;

    cursor: pointer;

    overflow: hidden;

    box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;

    transition: all 0.5s ease 0s;

    position: relative;

    z-index: 200;

    display: block;

    border: 0px;

    background: rgb(77, 194, 71) !important;

  }

  #whatsapp-widget.ww-normal .ww-icon-link {

    width: 50px;

    height: 50px;

  }

  #whatsapp-widget.ww-medium .ww-icon-link {

    height: 65px;

    width: 65px;

  }

  #whatsapp-widget.ww-big .ww-icon-link {

    height: 75px;

    width: 75px;

  }

  #whatsapp-widget .ww-icon div {

    display: flex;

    align-items: center;

    justify-content: center;

  }

  @media (max-width: 768px) {

    #whatsapp-widget {

      bottom: 5px;

    }

    #whatsapp-widget .ww-text {

      display: none;

    }

    #whatsapp-widget.ww-right {

      right: 5px;

      left: unset;

    }

    #whatsapp-widget.ww-left {

      left: 5px;

      right: unset;

    }

  }

  @keyframes slide {

    from {

      bottom: -20px;

      opacity: 0;

    }

    to {

      bottom: 0px;

      opacity: 1;

    }

    0% {

      opacity: 0;

    }

    100% {

      opacity: 1;

    }

  }

  @keyframes grow {

    0% {

      -webkit-transform: scale(0);

      -moz-transform: scale(0);

      -o-transform: scale(0);

      -ms-transform: scale(0);

      transform: scale(0);

    }

    50% {

      -webkit-transform: scale(1.2);

      -moz-transform: scale(1.2);

      -o-transform: scale(1.2);

      -ms-transform: scale(1.2);

      transform: scale(1.2);

    }

    100% {

      -webkit-transform: scale(1);

      -moz-transform: scale(1);

      -o-transform: scale(1);

      -ms-transform: scale(1);

      transform: scale(1);

      opacity: 1;

    }

  }

</style>

Blogger WhatsApp İletişim Butonu Eklemek

Widget (gadget) olarak eklemek için :

Blogger > Düzen > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

 

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

 

 

 

 

 

 

 

 

 

Yorumlar
Bu yazıya yorum yapan ilk kişi sen ol.