For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tombol chat whatsApp box melayang di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat tombol dan box chat WhatsApp melayang di blogger

Info: Oke jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Contact Chat

Jika kamu memiliki blog dengan tujuan bisnis pastinya dengan menaruh link contact ataupun media sosial sangat di utamakan, nah karena pelanggan ataupun pengunjung blog bisa dengan mudah menghubungi anda jika ia tertarik dengan bisnis yang anda publikasikan melalui blog tersebut

WhatsApp Box

Sedangkan pada fitur WhatsApp box tersedia tombol chat WhatsApp beserta form chat yang muncul saat di klik, nah namun WhatsApp box tersebut tidak memiliki fitur chat langsung di dalam form chat alias box chat, karena pengunjung yang mengklik form chat tersebut akan di arahakan ke aplikasi WhatsApp dengan menggunakan link WhatsApp langsung ke dalam sebuah chat

Mode sticky

Jika kamu memasang dan menggunakan WhatsApp box di blogger, maka tampilan dari tombol chat WhatsApp di blogger tersebut memiliki gaya sticky alias melayang, sama halnya juga pada form Chat WhatsApp di blogger juga memiliki gaya popup yang muncul jika penggunjung mengklik tombol chat WhatsApp

Contoh Tampilan

Untuk mengetahui bagaimana kah contoh tampilan dari WhatsApp box melayang di blogger silahkan klik saja tombol di bawah ini untuk melihatnya

Info: Bagaimana sobat icloudZer dengan contoh tampilan nya, keren kan 😘 pasti nya lah

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat tombol chat WhatsApp melayang di blogger, lakukan setiap langkah langkah yang admin jabarkan sebentar lagi secara benar agar tidak salah dalam penerapan nya oke

Kode CSS

Langkah pertama seperti biasanya salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.rahbtn-wa{background-color:#128C7E;bottom:20px;right:10px;width:45px;height:45px;position:fixed;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}.rahbtn-wa a, .rahbtn-wa label{display:flex;align-items:center;width:45px;height:45px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}.rahbtn-wa a svg, .rahbtn-wa label svg{margin:auto;fill:#fff}.rahbtn-wa label svg.svg-2{display:none}
.rahchat-wa{position:fixed;bottom:60px;right:10px;width:320px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}.rahchat-wa .rahchat-wa-c{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.rahchat-wa .rahchat-wa-h{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#128C7E;overflow:hidden}
.rahchat-wa .rahchat-wa-h:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
.rahchat-wa .rahchat-wa-h svg{width:35px;height:35px;flex:0 0 auto;fill:#fff}
.rahchat-wa .rahchat-wa-h .rahchat-wa-j{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:#fff}
.rahchat-wa .rahchat-wa-h .rahchat-wa-j span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.rahchat-wa .rahchat-wa-tx{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:}
.rahchat-wa .rahchat-wa-tx span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px}
.rahchat-wa .rahchat-wa-tx span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:#989b9f}
.rahchat-wa .rahchat-wa-tx span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.rahchat-wa .rahchat-wa-tx span.typing:after{display:none}
.rahchat-wa .rahchat-wa-tx span.typing svg{height:14px;fill:#989b9f}
.rahchat-wa .rahchat-wa-bt{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:#505050}.rahchat-wa-m{display:none}.rahchat-wa .rahchat-wa-bt svg{width:20px;height:20px;fill:#989b9f;margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}.rahchat-wa-m:checked + .rahbtn-wa label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}.rahchat-wa-m:checked + .rahbtn-wa label svg.svg-1{display:none}.rahchat-wa-m:checked + .rahbtn-wa label svg.svg-2{display:table-cell}.rahchat-wa-m:checked + .rahbtn-wa + .rahchat-wa{bottom:90px;opacity:1;visibility:visible}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Oke anggaplah kamu sudah meletakkan kode CSS di atas, langkah selanjutnya adalah salin lagi kode HTML di bawah ini, kemudian letakkan di atas kode </body>

<input class="rahchat-wa-m hidden" id="offrahchat-wa-m" type="checkbox"/>
<div class="rahbtn-wa" id="rahbtn-wa">
<label for="offrahchat-wa-m">
<svg class="svg-1" viewbox="0 0 32 32">
<path d="M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z">
</path>
<path d="M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z">
</path>
</svg>
<svg class="svg-2" viewbox="0 0 512 512">
<path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z">
</path>
</svg>
</label>
</div>
<div class="rahchat-wa">
<div class="rahchat-wa-c">
<div class="rahchat-wa-h">
<svg viewbox="0 0 32 32">
<path d="M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z">
</path>
<rect height="2" width="2" x="19" y="9">
</rect>
<rect height="2" width="2" x="14" y="9">
</rect>
<rect height="2" width="2" x="24" y="9">
</rect>
<path d="M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z">
</path>
</svg>
<div class="rahchat-wa-j">
Silahkan chat dengan tim kami
<span>
Admin akan membalas pesan dalam beberapa menit...
</span>
</div>
</div>
<div class="rahchat-wa-tx">
<span>
Halo, Ada yang bisa kami bantu?
</span>
<span class="typing">
<svg viewbox="0 0 512 512">
<circle cx="256" cy="256" r="48">
</circle>
<circle cx="416" cy="256" r="48">
</circle>
<circle cx="96" cy="256" r="48">
</circle>
</svg>
</span>
</div>
</div>
<a class="rahchat-wa-bt" href="https://api.whatsapp.com/send?phone=085834306926&amp;text=Assalamualaikum,%20Saya%20ingin%20bertanya" rel="nofollow noreferrer" target="_blank">
<span>
Mulai chat...
</span>
</a>
</div>

Info: Fungsi dari kode HTML di atas adalah untuk menampilkan WhatsApp box nya di blogger

Penjelasan

Jika kamu ingin mengubah warna ataupun posisi dari tombol chat WhatsApp tersebut lakukan atau ubah pada kode CSS, sedangkan untuk mengubah nomor telepon dan text pada form Chat WhatsApp mode Popup tersebut lakukan atau ubah pada kode HTML nya oke

Silahkan chat dengan tim kami Admin akan membalas pesan dalam beberapa menit...
Halo, Ada yang bisa kami bantu?
Mulai chat...

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.