Cara Memasang Widget Chat Whatsapp di Blogger Dengan Nomor dan Akun Ganda

Halo sobat, pada kesempatan kali ini saya ingin membagikan tutorial Cara Memasang Widget Chat Whatsapp di Blogger, widget ini sangat cocok sekali jika blog atau website sobat bertemakan jualan produk atau jasa.

Pada widget chat whatsapp yang saya bagikan ini sobat dapat menambahkan 2 akun whatsapp atau lebih, untuk cara kerja nya pengunjung dapat mengetik pesan di dalam widget tersebut dan setelah pengunjung mengeklik Kirim akan secara otomatis membuka aplikasi whatsapp untuk mengirim pesan yang sudah di tulis pada widget chat whatsapp tersebut.

Cara Memasang Widget Chat Whatsapp di Blogger

Masuk ke Blogger > Tema > Edit HTML tambahkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

Salin kode HTML di bawah ini dan letakan di atas kode </body> atau di letakan pada widget > Tataletak Blogger

<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hallo !</h3>
<p>Pilih salah satu Customer Service kami di bawah ini untuk mengobrol di WhatsApp</p></div>
<div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div>
<div class='home-chat'>
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3J-4eMy4O767bS2fZnV_DuKHrOlQDW65rx42PhC-Jl2KcDYp-OyNjMibZA_J-cXEhQgS6GWiWjeeuf3Dqygfmeupr2c12PfRPJEV8UZdER11XsuTpPcy0LuVNmfTpvNcnqBWZHoqHvRs/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Support</span>
<span class='chat-nama'>Maks Miliyan</span>
</div><span class='my-number'>6283895007436</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSE7tsqYh3B2oFHXJKX63sk4BnuTp7BJvr4L_BrmrwNhQibIO900xkLnI4SnQemIYMSh3xKKnXLr3rpsY5jzzPyzFik4w9JxEiUUuDP6utvwvGyVFok7Uxu5QwSuKdj05d3GTHpWkFAnM/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Sales</span>
<span class='chat-nama'>Customer Service 2</span>
</div><span class='my-number'>6283895007436</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>Hubungi Kami <b>083895007436</b></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hallo, ada yang bisa saya bantu?</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='Pesan teks' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Kirim</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>Hallo, ada yang bisa saya bantu?</a>

Ubah yang sudah saya beri tanda pada kode di atas, gunakan kode 62 (tanpa tanda +) untuk nomor whatsapp

Tambahkan juga kode javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.maksdzgn.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

Setelah kode di atas terpasang dengan benar klik Simpan Tema

Demo

Baca juga :

• Cara Membuat Recent Post by Label di Halaman Statis Blogger
• Cara Membuat Related Post Keren di Blogger
• Cara Membuat Tombol Demo dan Download Keren di Blogger

Jika template blog sobat belum menggunakan Font Awesome dan jQuery, sobat bisa menambahakan kode di bawah ini tepat di atas kode </head>

Font Awesome

<link href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel='stylesheet' type='text/css'/>

jQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Jadi itulah tutorial Cara Memasang Widget Chat Whatsapp di Blogger yang bisa saya bagikan kali ini, semoga bermanfaat dan Terima kasih.