Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Contact From WhatsApp di Blogger

Membuat Contact From WhatsApp di Blogger
Di era digital semua serba canggih ini banyak orang berjualan online, namun agar kita lebih dekat dengan pelanggan tentu kita harus menaruh kontak kita 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 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>
Jangan lupa ganti Nomor Handphone nya dengan punya kalian.

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>
Langkah terakhir adalah memasukkan kode JQuery di atas kode </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>

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.
Mas Dar
Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2020 demgan nnama sudarblogger.web.id