Cara Mudah Memasang Widget WhatsApp di Blogger dengan Admin Lebih Dari Satu

Wahyu Development - Bagaimana cara membuat widget WhatsApp di Blogger?

Penggunaan widget WhatsApp dalam sebuah website jual beli online sangatlah diperlukan, agar customer dapat menghubungi admin bila ada kendala ataupun hal lainnya. Disini admin dalam WhatsApp dapat di tambahkan sesuai yang anda inginkan, agar ketika admin satunya tidak merespon anda dapat menggunakan admin lainnya berikut tutorialnya.

Pertama silahkan anda buka dasbor Blogger anda --> lalu klik Theme --> kemudian pilih Edit HTML. Pada halaman Edit HTML silahkan anda cari code ]]></b:skin> lalu paste code CSS berikut ini sebelum code tersebut.

/* CSS Developer WhatsApp */
#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:"FontAwesome";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}

Langkah berikutnya cari code </body> lalu letakan code HTML dibawah ini sebelum code tersebut.

<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/AVvXsEi2QFCHz3RfOTJDmxNVfwiMGiSVrpSTMiLDZ_PGikDCH2Z_hH7dNz2wFaSGADDD5vpb-BWrJQzDyzHzLLWmtRvMiuSkGQr2w3kAmmd3AB8u4ur1oRtMfd_pCbSRmx-7LlW0gE8b1T86txU/s70/supportmale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Customer Service</span>
<span class='chat-nama'>Rio Imam P.</span>
</div><span class='my-number'>628xxxxxxxxxx</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/AVvXsEhV1hfuXQaSpOHwWIvtz283qRSJ1qaBCuAoP1AdFqSjnIf2j8q5ZRO0knPPWyDmCNodxobBYPp9akLhXifrz-JaYPa5I69Sb_UN4HbmbOo4deVR0qkI9cNPkHJY3nveUBQzpWo88jrl5Qo/s70/supportfemale.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Teknisi</span>
<span class='chat-nama'>Wahyu Development</span>
</div><span class='my-number'>628xxxxxxxxxx</span>
</a>
<!-- Info Contact End -->
<div class='blanter-msg'>Hubungi Kami <b>08xxxxxxxxxx</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>

[Catatan] Ubahlah img dengan URL gambar yang telah anda upload dan ganti nama dan nomor serta pesan yang ingin anda sampaikan.

Tambahkan code Javascript berikut ini sebelum code </body> untuk memanggil code CSS dan HTML diatas.

<script type='text/javascript'>
//<![CDATA[
/* Wahyu Development */
$(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>

Jika sudah silahkan klik Save Tema. Dengan demikian blog anda akan menampilkan widget WhatsApp untuk layanan bantuan.

Itulah cara menambahkan widget WhatsApp di Blogger dengan menggunakan admin lebih dari satu (1), berikan komentar anda dan semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post