Kenapa harus widget WhatsApp?, karena WhatsApp adalah sosial media yang paling banyak digunakan dan paling sering digunakan oleh orang.
Selain itu kerahasiaan chat antara pemilik blog dengan pengunjung blog pasti aman, oleh sebab itu pengunjung dan pemilik blog dapat lebih leluasa untuk menyampaikan sesuatu.
Penasaran seperti apa widget WhatsApp yang akan kita pasang pada kali ini?, coba cek blog blogger.panduancode.com dan lihat tombol tanya kami dan silahkan cek dan uji coba.
Jika kalian ingin memasang widget WhatsApp seperti itu maka ikuti tutorial dibawah ini.
Cara Pasang Widget WhatsApp Di Blogger
1. Buka edit HTML Template
Kemudian agar lebih mudah dalam tahap pemasangan widget WhatsApp kalian dapat mengcopy semua kode template dan paste pada kode editor, contohnya Visual Studio Code dan lain-lain.
Lihat gambar dibawah ini untuk lebih jelasnya.
Seperti gambar diatas caranya mudah kalian masuk ke menu Tema lalu klik tombol titik tiga, setelah itu akan muncul menu popup dan kalian pilih Edit HTML.
Setelah itu maka akan muncul halaman Edit HTML template Blogger, copy semua dan paste pada kode editor kalian.
2. Tambahkan Kode CSS Widget WhatsApp
Kode CSS Widget WhatsApp berfungsi untuk mengatur tampilan widgetnya agar terlihat keren.
Dibawah ini kode CSS yang harus kalian tambahkan tepat diatas kode </style> agar lebih mudah mengedit templatenya.
/* 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;left:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.panduanbloggershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;left:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.panduanbloggershow-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;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}
.panduanblogger-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 .panduanblogger-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}
3. Tambahkan Kode Javascript Widget WhatsApp
Kode Javascript widget WhatsApp berfungsi untuk mengambil nomor WhatsApp dari widget HTML/Javascript dimenu tataletak.
Kemudian untuk mengirim pesan teks ke nomor WhatsApp tersebut secara otomatis.
Berikut ini kode Javascript widget WhatsAppnya.
<script type='text/javascript'>
//<![CDATA[
$(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",".panduanbloggershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>
Copy kode Javascript diatas kemudian paste tepat diatas kode </body>.
4. Pasang Jquery
Widget WhatsApp ini menggunakan library Jquery, jadi kalian wajib memasang jquery ditemplate agar widget WhatsApp berjalan.
Cara pasang jquery sangat mudah, copy kode dibawah ini.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
Simpan kode jquery tersebut tepat diatas kode </head>.
Jika pada template kalian sudah terpasang jquery maka jangan pasang lagi, cukup satu saja.
5. Pasang Font Awesome
Font awesome pada widget WhatsApp ini berfungsi untuk menampilkan logo WhatsApp saja.
Dan berikut kode font awesomenya.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Simpan kode font awesome tersebut diatas kode jquery kalian atau diatas kode </head>.
Kemudian copy lagi kode template kalian yang sudah diedit pada kode editor, dan paste untuk mengganti semua kode template kalian pada halaman Edit HTML.
Lalu save template blog kalian, dan setelah itu buka menu tataletak pada Blogger.
6. Buka Menu Tataletak
Buka menu tataletak dan buat widget HTML/Javascript.
Dan berikut ini kode widget WhatsApp-nya.
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUxap2kLKAfeo-4D2ylbICZ291hkFBMS4LKu32lKCe0qgkWDloFamc_B76eoIuko1p8vR6am3OAWlArdCNdlK_KKWGM4eUf2hm0bMHmOj_h4fBFY6IgkH3mtJjW5v_KOpkvpggrF2pmU/s70/supportmale.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/></div>
<div class='info-chat'>
<span class='chat-label'>Pemilik</span>
<span class='chat-nama'>Arif NoerWahidin</span>
</div><span class='my-number'>+62 821-2654-6564</span>
</a>
<!-- Info Contact End -->
<div class='panduanblogger-msg'>Call us to <b>+62 821-2654-6564</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Hai, ada yang bisa saya bantu?</span></div>
<div class='panduanblogger-msg'><textarea id='chat-input' placeholder='Write a response' maxlength='120' row='1'></textarea>
<a href='javascript:void;' id='send-it'>Send</a></div></div>
<div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a>
</div>
<a class='panduanbloggershow-chat' href='javascript:void' title='Show Chat'><i class="fa fa-whatsapp" aria-hidden="true"></i>Tanya Kami</a>
Kemudian edit nomor WhatsApp yang ada pada kode diatas, dan edit juga nama kontak WhatsAppnya.
Setelah itu save dan coba akses blog kalian kembali, cek apakah widget WhatsAppnya muncul atau tidak.
Tutorial atau panduan cara memasang widget WhatsApp Di Blogger keren pada artikel ini saya juga sudah mempraktekkannya, dan memakainya pada template blog ini.
Sekian saja tutorial singkat yang langsung ke pointnya semoga kalian dapat mengerti dan apa yang saya sampaikan dapat bermanfaat aamiin.
Referensi: idblanter
