Membuat Tombol Chat WhatsApp Di Blogger

Hallo sahabat blog!
Pada kesempatan kali ini calondesain akan berbagi informasi tentang cara membuat tombol chat whatsApp di blogger yang sebelumnya sudah saya tutorialkan juga pada postingan sebelumnya yaitu tentang Cara Membuat dan Memasang Tombol Live Chat di blogger .
Pada tutorial kali ini sedikit berbeda dari sebelumnya yang dimana pada sebelumnya banyak pilihan untuk melakukan chat dalam satu kotak Live Chat

Script tombol chat whatsApp ini saya dapatkan dari rekan saya yaitu idblanter.com dan sedikit saya modifikasi warnanya supaya adanya perbedaan.

Baiklah, tanpa basa-basi lagi langsung sajake tutorialnya dibawah ini:
1. Login ke akun blogger anda
2. Pada sidebar sebelah kiri pilih Tema > Edit Html
3. Silahkan anda copy kode CSS dibawah ini, dan letakan tepat diatas kode </head>



<style type="text/css">
    /* 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.sundakushow-chat{background:linear-gradient(to right);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.sundakushow-chat{background:

linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size: 320% 200%;-webkit-animation:

Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation:

Gradient 15s ease infinite;}@-webkit-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes

Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
a.sundakushow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#303254,#33b745);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}
.sundaku-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 .sundaku-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}
</style>

4. Kemudian anda pergi ke Tata Letak > Tambahkan Widget > HTML/JavaScript > Salin code HTML dibawah ini dan letakan di konten, untuk judul dikosongkan saja lalu simpan/save widget.



<div id='whatsapp-chat' class='hide'>
<div class='header-chat'>
<div class='head-home'><h3>Hello!</h3>
<p>Klik salah satu perwakilan kami di bawah untuk mengobrol di WhatsApp atau mengirim email kepada kami sundaku.mail@gmail.com</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://1.bp.blogspot.com/-AaHoL_OFlFw/XgWsBg9NtGI/AAAAAAAAAOM/N5unScwLPZUNxhzEkJUAo-c6zKCR1M-ZACLcBGAsYHQ/s320/512.jpg'/></div>
<div class='info-chat'>
<span class='chat-label'>Admin1</span>
<span class='chat-nama'>Sundaku</span>
</div><span class='my-number'>6281585398339</span>
</a>
<!-- Info Contact End -->
<!-- Info Contact Start -->
<a class='informasi' href='javascript:void' title='Chat Whatsapp'>
<div class='info-avatar'><img src='https://1.bp.blogspot.com/-S9MualVdF3s/Xe-RnP3WKeI/AAAAAAAAAKg/SL8CBDAtfiMj7QTJY5oHvT0zm74Apn62ACLcBGAsYHQ/s1600/20191210_193606.png'/></div>
<div class='info-chat'>
<span class='chat-label'>Admin2</span>
<span class='chat-nama'>Calon Desain</span>
</div><span class='my-number'>6281585398339</span>
</a>
<!-- Info Contact End -->
<div class='sundaku-msg'>Call us to <b>+6281585398339</b> from <i>0:00hs a 24:00hs</i></div></div>
<div class='start-chat hide'>
<div class='first-msg'><span>Halo! Apa yang bisa saya lakukan untuk Anda?</span></div>
<div class='sundaku-msg'><textarea id='chat-input' placeholder='Write a response' 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='sundakushow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>Apa yang bisa saya bantu?</a>

5. Pada kode HTML diatas, yang saya blok warna biru silahkan anda ganti kata-katanya ataupun link gambar dan no hp sesuai dengan yang anda inginkan.

6. Langkah terakhir anda kembali lagi ke tema > edit html, kemudian copy kode JavaScript dibawah ini dan letakan tepat diatas kode </body>


<script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.sundaku.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",".sundakushow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>

7. Simpan template dan lihat hasilnya.
Jika template anda tidak menggunakan Icon Fontawesome dan jQuery, anda bisa menambahkannya dibawah ini dan letakan diatas kode </head>

Fontawesome:

<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>



Semoga bisa bermanfaat dan jangan lupa untuk selalu berbagi informasi.

Terima kasih