Membuat Contact From WhatsApp di Blogger
Contohnya aja Whatsapp, aplikasi yang pas banget untuk berbisnis. Pada kesempatan kali ini saya akan memberikan tutorialnya untuk kalian semua yaitu Memasang Contact From Whatsapp di Blogger. Tutorial ini saya dapat dari blog Jasa Website yang orang desain tampilan blog ini.
Nah sobat bagaimana caranya?? Berikut ini adalah tutorialnya.
Memasang Contact From Whatsapp di Blogger
Langkah pertama masukkan kode berikut ini terserah mau di letakkan dimana ini dia kodenya.<i class="whatsapp-btn">WhatsApp</i>
<div id="whatsapp">
<input class="tujuan" type="hidden" value="089618885066"> <!-- 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>Langkah kedua letak Script CSS ini di atas kode </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/AVvXsEjw7gakM_POsxANj8Gk5nQvQBaIc4O-Twrzrgz1wohCJUL5_gppJ-vViyHrX2T9q852rrd07NqG5VC_Jup0ritrn0UxRI0Zn5_UXvuDPM_WTqZiGgm4Yl-kSR7ty_bycUs04QDRgPY52jcE/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>Dalam tutorial ini tidak menggunakan Javascript jadi sangat ringan untuk blog tidak memberatkan bagi blog.
Nah Itulah Tutorial Membuat Contact From WhatsApp di Blogger, Jika kalian ingin tanyakan bisa lewat komentar di bawah ini.
