Cara Memasang Chat WatsApp di Blogger Dengan Sangat Mudah dan Simpel

Cara Memasang Chat WatsApp di Blogger dengan sangat mudah dan simpel, seperti telah kita ketahui ,bahwa website yang baik adalah yang memberikan layanan Chatingan via WatsApp.

Website yang memberikan layanan Chat dengan admin akan tampak lebih profesional ,apalagi website yang menjual produc seperti toko online, menjual Jasa atau apa saja , fitur chat dengan admin website akan lebih banyak pengunjung dan memberikan kepercayaan kepada pengunjung .

Kali ini saya akan memberikan cara membuat Chat WatsApp di blog ,ikuti langkah demi langkah ,agar tidak salah , seperti biasa buka dasbord blog anda dan pilih template seperti pwnampakan pada gambar di bawah ini

Cara Memasang Chat WatsApp di Blogger Dengan Sangat Mudah dan Simpel

Copy kode CSS dibawah ini dan pastekan tepat di atas kode berikut ini ]]></b:skin> seperti dibawah ini penampakanya

/* CSS Multiple Whatsapp Chat by Darmudi Susanto lollykuwl.blogspot.com*/

#whatsapp-chat{position:fixed;background:#fff;width:500px;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.darmudishow-chat{background:linear-gradient(to right top,#009933,#009933);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.darmudishow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#009933,#009933);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}

.darmudi-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 .darmudi-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}

]]></b:skin>

Kemudian copy kode script dibawah ini dan pastekan tepat di atas kode </body>

//<![CDATA[

/* Whatsapp Chat Widget by */

$(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",".darmudishow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});

//]]>

</script>

Setelah itu save templat anda .

Jika sudah beres copy kede HTML dibawah ini ,ganti tex berwarna orange dengan alamat Email dan nomor WatsApp anda , ikuti langkat terakhir ini baik baik jangan sampai sampai salah ,masuk dasbord blog anda lagi perhatikan gambar dibawah ini

Cara Memasang Chat WatsApp di Blogger Dengan Sangat Mudah dan Simpel

Kemudian klik Tambahkan Gadget ,dan pilih

Cara Memasang Chat WatsApp di Blogger Dengan Sangat Mudah dan Simpel

Dan pastekan kode HTML di bawah ini

<div class='head-home'><h3>Hello!</h3>

<p>Click one of our representatives below to chat on WhatsApp or send us an email to darmudisusanto@gmail.com</p></div>

<span class='chat-label'>Support</span>

<span class='chat-nama'>Customer Service 1</span>

</div><span class='my-number'>62895604324386</span>

</a>

<span class='chat-label'>Sales</span>

<span class='chat-nama'>Customer Service 2</span>

</div><span class='my-number'>6285314077154</span>

</a>

<div class='first-msg'><span>Hello! What can I do for you?</span></div>

</div>

<a class='darmudishow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'>Hello! What can I do for you?</i></a>

kemudian simpan dan dilahkan di uji coba ,selamat mencoba.

Sumber Inspirasi

Cara Memasang Chat WatsApp di Blogger Dengan Sangat Mudah dan Simpel

Posting Komentar

Posting Komentar

Populer

Label

Archieve