Home / Unlabelled / Blogger Whatsapp Eklentisi Html Kodu

Blogger Whatsapp Eklentisi Html Kodu

 Blogger Whatsapp Eklentisi Html Kodu

Blogger Whatsapp Eklentisi Html Kodu sitenize kodu ekleyerek blogger whatsapp konuşma kodunu sizde whatsapp'a bağlayabilirsiniz

Sadece aşağıdaki adımları dikkatli takip etmeniz yeterli olacak.

Blogger siteye Whatsapp destek butonu ekleme işlemine başlayalım! 

Öncelikle Blogger kontrol paneline gidin ve menüden Tema seçeneğini tıklayın. Özelleştirme seçeneğinin altındaki ‘HTML’yi düzenle‘ye tıklayın.




  • HTML kod sayfasının içinde herhangi bir boş yere tıklayın. Şimdi klavyenizde ctrl+F tuşlarına basın, böylece arama kutusu açılacak. Arama kutusuna </body> yazın ve Enter’a tıklayın. Aradığınız </body> etiketi sarı renkte gösterilecek ve vurgulanacaktır.
  • Şimdi aşağıdaki kodu </body> etiketinin üst kısmına yapıştırın ve değişiklikleri kaydedin:


    • <div id="whatsapp-widget" class="ww-right ww-normal ww-yes">
  <a target="_blank" href="https://wa.me/905555555555/" 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/905555555555/">
      <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>

     

  • Kodu ekledikten sonra, kod içerisinde vurgulanan kısımları düzenlemeyi unutmayın (telefon numaranız ve harekete geçirici mesajınız).

Blogger WhatsApp canlı sohbet butonu ekleme işleminin ardından butonunuz şu şekilde görünecek:

blogger whatsapp chat ekleme

Blogger’a WhatsApp canlı sohbet düğmesi eklemek için ayrıca Getbutton.io sitesinden de faydalanabilirsiniz. Üstelik sadece WhatsApp değil, aynı zamanda Messenger ve diğer farklı canlı iletişim seçenekleri de mevcut. Sadece form alanlarını doldurarak otomatik kod oluşturabilir ve kodu </body> etiketinin üzerine yapıştırarak Blogger bloğunuza kolaylıkla canlı destek butonu ekleyebilirsiniz.




Blogger Whatsapp Eklentisi Html Kodu Blogger Whatsapp Eklentisi Html Kodu Reviewed by ücretli satışlar on 03 Eylül Rating: 5

You May Also Like

Hiç yorum yok:

Kaydol: Kayıt Yorumları ( Atom )
Blogger tarafından desteklenmektedir.