Cara Membuat Contact From WhatsApp di Blogger
September 19, 2018
Cara Membuat Contact From WhatsApp di Blogger - Di era digital semua sudah serba canggih, banyak orang berjualan online. Agar lebih dekat dengan pelanggan tentu anda harus menaruh kontak agar bisa di hubungi oleh pelanggan.
Contohnya aja Whatsapp, aplikasi yang pas banget untuk berbisnis. Pada kesempatan kali ini saya akan memberikan tutorialnya untuk kalian semua yaitu Cara Memasang Contact From Whatsapp di Blogger. Tutorial ini saya dapat dari situs Jasa Website.
2. Simpan kode CSS dibawah ini tepat di atas tag </head>
Referensi : https://www.jasa-design.web.id/info/cara-membuat-widget-contact-form-whatsapp/
Cara membuat Widget Contact Form WhatsApp
1. Langkah pertama masukkan kode berikut ini dan letakkan sebelum kode </body> atau sesudah kode <body><i class="whatsapp-btn">WhatsApp</i>
<div id="whatsapp">
<input class="tujuan" type="hidden" value="081234567811"> <!-- No. WhatsApp -->
<label>
<input class="nama" type="text" placeholder="Nama Lengkap..">
</label>
<label>
<input class="email" type="email" placeholder="Alamat E-mail..">
</label>
<label>
<textarea class="pesan" placeholder="Pesan.."></textarea>
</label>
<a class="submit">Kirim</a>
</div>
2. Simpan kode CSS dibawah ini tepat di atas tag </head>
<style type="text/css">
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
outline:none;
margin:0;
padding:0;
}
.whatsapp-btn {
cursor:pointer;
position:fixed;
bottom:40px;
right:40px;
display:block;
width:50px;
height:50px;
border-radius:50px;
text-indent:-9999px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorjjjdUxbwge-gyJQkA6hbbwL00QSWHhJ2pfQPYoAfovylHn9ZH8SRO10ex-5fFIqlr8eDIci4x0JuQ3-ufCUTuOntHdd0EJh-5RnHrDreQGWIuj0RLvjm59t6Dgc561fWsXXQiC_D2jq/s300/Whatsapp.png) no-repeat center center;
background-size:50% auto;
box-shadow:0 20px 25px rgba(0,0,0,.05);
transition:.2s;
}
.whatsapp-btn:active {
bottom:35px;
}
#whatsapp {
position:fixed;
z-index:+100;
bottom:0px;
right:0px;
display:block;
background:#fff;
box-shadow:0 20px 25px rgba(0,0,0,.05);
max-width:300px;
font-family:Helvetica, sans-serif;
font-size:90%;
border-radius:4px;
visibility:hidden;
opacity:0;
transition:.3s;
}
#whatsapp.toggle {
bottom:110px;
right:40px;
visibility:visible;
opacity:1;
}
@media(max-width:320px) {
.whatsapp-btn {
bottom:10px;
right:10px;
}
#whatsapp.toggle {
bottom:80px;
right:10px;
visibility:visible;
opacity:1;
}
}
#whatsapp label,
#whatsapp a {
display:block;
margin:15px;
text-decoration:none;
}
#whatsapp input,
#whatsapp textarea {
display:block;
border:1px solid #eee;
box-shadow:inset 0 2px 5px #eee;
width:100%;
padding:15px;
border-radius:2px;
}
#whatsapp input.nama {
text-transform:capitalize;
}
#whatsapp input:focus,
#whatsapp textarea:focus {
border:1px solid #ddd;
}
#whatsapp textarea {
min-height:80px;
resize: none;
}
#whatsapp a {
cursor:pointer;
display:block;
padding:10px;
font-weight:bold;
text-align:center;
background:#25D366;
color:white;
border-radius:2px;
}
#whatsapp a:hover {
background:#20b558;
}
</style>
<script type="text/javascript">
$('.whatsapp-btn').click(function(){
$('#whatsapp').toggleClass('toggle');
});
// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(WhatsApp);
$("#whatsapp input, #whatsapp textarea").keypress(function() {
if (event.which == 13) WhatsApp();
});
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
function WhatsApp() {
var ph = '';
if ($('#whatsapp .nama').val() == '') { // Cek Nama
ph = $('#whatsapp .nama').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .nama').focus();
return false;
} else if ($('#whatsapp .email').val() == '') { // Cek Email
ph = $('#whatsapp .email').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .email').focus();
return false;
} else if (reg.test($('#whatsapp .email').val()) == false) { // Cek Validasi Email
alert('Alamat E-mail tidak valid.');
$('#whatsapp .email').focus();
return false;
} else if ($('#whatsapp .pesan').val() == '') { // Cek Pesan
ph = $('#whatsapp .pesan').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .pesan').focus();
return false;
} else {
if (!confirm("Sudah menginstall WhatsApp?")) {
window.open("https://www.whatsapp.com/download/");
} else {
// Check Device (Mobile/Desktop)
var url_wa = 'https://web.whatsapp.com/send';
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
url_wa = 'whatsapp://send/';
}
// Get Value
var tujuan = $('#whatsapp .tujuan').val(),
via_url = location.href,
nama = $('#whatsapp .nama').val(),
email = $('#whatsapp .email').val(),
pesan = $('#whatsapp .pesan').val();
$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=Halo, saya *' + nama + '* (' + email + ').. %0A%0A' + pesan + '%0A%0Avia ' + via_url);
var w = 960,
h = 540,
left = Number((screen.width / 2) - (w / 2)),
tops = Number((screen.height / 2) - (h / 2)),
popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
popupWindow.focus();
return false;
}
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Referensi : https://www.jasa-design.web.id/info/cara-membuat-widget-contact-form-whatsapp/