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/
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.
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>
*Pengaturan: Ubah No. Telepon 081234567811 pada kode HTML di atas dengan No. Telepon WhatsApp anda.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>
3. Terakhir! simpan kode jQuery dibawah ini tepat di atas tag </body><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>
Catatan: Kode jQuery akan berfungsi jika anda menginstall jQuery Library, Jika anda belum menginstall kode jQuery Library, silahkan copy-paste kode dibawah ini tepat sebelum tag </head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Sekian postingan tentang Cara Membuat Widget Contact Form WhatsApp, jika ada pertanyaan silahkan tuliskan melalui kotak Komentar dibawah ini.Referensi : https://www.jasa-design.web.id/info/cara-membuat-widget-contact-form-whatsapp/