Blogger İçin WhatsApp İletişim Kutusu (Panelden Ayarlama)

Blogger İçin WhatsApp İletişim Kutusu (Panelden Ayarlama)

Soru: Blogger İçin Kullanışlı Bir WhatsApp İletişime Geç Kutusu Hazırlanabilir mi?

Blogger WhatsApp İletişim Kutusu, İletişim Butonu Nasıl Eklenir? Benimle iletişime geçen arkadaş benden bu şekilde bir talepte bulundu. Bende İnternet ortamında bulunan bazı WhatsApp iletişim kutularını inceledim ve hepsi manuel işlem gerektiriyor. Bu şekilde olunca bende biraz kodları kurcaladım. 

Cevap: Evet Blogger İçin Daha Güzel Bir WhatsApp Kutusu Hazırlanabilir. 

Bunu yapmak oldukça basit aslında ama size daha kolay bir şekilde sunmak için bazı kodları birleştirerek ve aklınıza herhangi bir soru işareti kalmasını engellemek için bir kurulum hazırladım. Hazırladığım kodların tümünü bir Widget altında toplayarak daha fazla kodla uğraşmamanızı istedim.

Bu konuyu açmak fikri arkadaş sayesinde doğdu ve belki ihtiyacı olan biri olur da kullanır.  Hazırlamış olduğum Blogger WhatsApp İletişim Kutusu sadece Düzen kısmından kendinize göre değişikler yapmanızı gerektirecek. Başlık, iletişim gibi kasımlar.

Konuyu buradan kısaltalım ve asıl kod kısmına geçelim. Yapmanız gerekenler aşağıda hazırladığım şekildedir. Sırasıyla yaptığınızda herhangi bir sorun yaşamazsınız.

WhatsApp İletişim Kutusu Kodları

Blogger Tema Düzenleme kısmına geçiyoruz. Öncelikle aşağıdaki Widget kısmını </body> etiketinin üstüne ekleyin.

<b:section class='whatsapp' id='whatsapp' maxwidgets='1' name='WhatApp İletişim Kutusu'>

     <b:widget id='LinkList01' locked='true' title='WhatApp İletişim Kutusu' type='LinkList' version='2' visible='true'>

       <b:widget-settings>

         <b:widget-setting name='sorting'>NONE</b:widget-setting>

         <b:widget-setting name='text-0'>İletişime geçmek için yazın</b:widget-setting>

         <b:widget-setting name='link-0'>https://wa.me/905555555555?text=Merhaba</b:widget-setting>

       </b:widget-settings>

       <b:includable id='main' var='this'>

      <b:include name='widget-title'/>

      <b:include name='content'/>

    </b:includable>

       <b:includable id='content'>

      <input class='chatMenu hidden' id='offchatMenu' type='checkbox'/>

        <label class='chatButton' for='offchatMenu'>

          <svg class='bi bi-whatsapp svg-1' fill='#ffffff' height='50' viewBox='0 -4 16 24' width='50' xmlns='http://www.w3.org/2000/svg'>

            <path d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/>

          </svg>

          <svg class='bi bi-x svg-2' fill='#ffffff' height='50' viewBox='0 -4 16 24' width='50' xmlns='http://www.w3.org/2000/svg'>

            <path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/>

          </svg>

        </label>

        <div class='chatBox'>

          <div class='chatContent'>

            <div class='chatHeader'>

              <svg class='bi bi-chat-right-dots' fill='#ffffff' height='24' viewBox='0 0 16 16' width='24' xmlns='http://www.w3.org/2000/svg'>

                <path d='M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z'/>

                <path d='M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/>

              </svg>

              <div class='chatTitle'><data:title/></div>

            </div>

            <div class='chatText'>

              <span>Merhaba, size nasıl yardımcı olabilirim?</span>

              <span class='typing'>...</span>

            </div>

          </div>

          <b:loop values='data:links' var='link'>

            <a class='chatStart' expr:href='data:link.target'><span><data:link.name/></span></a>

          </b:loop>

        </div>

    </b:includable>

     </b:widget>

   </b:section> {codeBox}

<b:section içinde bulunan WhatsApp iletişim widgetimizi ekledikten sonra CSS kodlarımızı ekliyoruz. CSS kodları sıkıştırdım. Aynı zamanda resim için png yerine svg kullandım. Herhangi bir sıkıntı yaşanmasın diye. 

.chatMenu,.chatButton .svg-2{display:none}.chatButton{position:fixed;background-color:#4dc247;bottom:20px;left:20px;border-radius:50px;z-index:50;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.chatBox{position:fixed;bottom:70px;left:20px;width:320px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;z-index:21;opacity:0;visibility:hidden;line-height:normal}.chatContent{border-radius:15px;background-color:#fff;box-shadow:0 5px 15px 0 rgba(0,0,0,.05);overflow:hidden;border:1px solid #b6b6b6}.chatHeader{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#4dc247;overflow:hidden}.chatHeader .chatTitle{padding-left:15px;color:#fff}.chatHeader .chatTitle span{display:block;line-height:1.58em}.chatText{display:flex;flex-wrap:wrap;margin:25px 20px;color:#505050}.chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px}.chatText span:after{content:'şimdi';margin-left:15px;font-size:9px;color:#989b9f}.chatText .typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}.chatText .typing:after{display:none}.chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#fff;overflow:hidden;color:#505050;border:1px solid grey}.chatMenu:checked + .chatButton{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.chatMenu:checked + .chatButton .svg-1{display:none}.chatMenu:checked + .chatButton .svg-2{display:block}.chatMenu:checked ~ .chatBox{bottom:90px;opacity:1;visibility:visible} {codeBox}

Blogger İçin WhatsApp İletişim Kutusu (Panelden Ayarlama)

Not: Bu her ikisini ekledikten sonra işlem tamamdır. İnternet ortamında bulunan hazır olan bir kodu derledim. Aslında bunu daha gelişmiş bir şekilde ayarlamıştım fakat herkes anlasın ve kullanabilsin diye en anlaşılır hale getirdim.

Sonuç:

Sitenizi veya web sitenizi ziyaret eden müşterilerle daha hızlı iletişime geçmek için bu şekilde bir Blogger eklentisi kullanabilirsiniz. Bu sayede yeni müşteriler kazanabilir ve daha fazla kazanç elde edbilirsiniz.