Skip to content Skip to sidebar Skip to footer

Memasang Tombol Chat WhatsApp diblogger

 Pada kesempatan kali ini, Genara code akan memberikan tutorial cara membuat tombol chat whatsApp di blogger. Apa sih fungsinya? Perlu anda ketahui bahwa pemasangat tombol live chat atau offline chat sangatlah penting, mengapa bisa? intinya sih seperti rumah yang memiliki penghuni. Kalo tanpa ada chat atau contact form, berarti rumah itu kosong dan tidak ada penghuni.

Begitu banyak situs web bisnis, personal atau blog yang memasang tombol chat live atau chat offline, fungsinya semua sama, agar bisa terhubung antara admin dan pengunjung.
Ok baiklah, Sebelum anda memulai memsang chat whatsApp ini. saya sarankan anda untuk membackup templatenya dulu yah.

Caranya :
Anda login ke akun blogger anda, kemudian pada sidebar kiri pilih theme atau tema, lalu pilih Cadangkan dan download. Seperti gambar dibawah ini:

Ok baiklah, jika anda sudah mencadangkan template anda, untuk cara memasang tombol chat whatsApp diblogger, tutorialnya dibawah ini:

1. Anda login ke akun blogger anda
2. Edit HTML
3. Silahkan anda copy kode CSS dibawah ini, kemudian tempel sebelu 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. Langkah selanjutnya, anda copy kode javascript dibawah ini dan tempelkan sebelum 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>
Kemudian anda simpan.

5. Langkah ke 5 atau terkahir, anda masuk ke tata letak yang berada di sidebar kiri, kemudian tambah widget - HTML/JavaScript - Untuk judul di kosongkan saja. Kemudian copy kode HTML dibawah ini, dan tempel pada kolom Konten, lalu simpan.

<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">Genara Code1</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">Genara Code 2</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>
Pada kode HTML diatas, yang saya blok warna kuning, silahkan anda ganti dan sesuaikan dengan keinginan anda yah.

Semoga bisa bermanfaat. 
Terima kasih
Genara Code
Genara Code Tidak ada ruginya menghabiskan waktu dan uang, hanya untuk melakukan sesuatu yang bersifat HOBI.

Post a Comment for "Memasang Tombol Chat WhatsApp diblogger"