Pertama anda login ke akun Blogger anda.
Kemudian buat Page/Halaman Baru
Selanjutnya Copy Code di bawah ini dan paste di Page/Halaman tersebut.
<style type="text/css" scoped="">
Pastekan kode CSS Disini.
</style>
Setelah itu Copy Kode CSS di Bawah ini dan pastekan di tengah kode yang tadi.
/* Default Whatsapp Form CSS by www.Dtulis.com */
body {font:600 16px Padauk,sans-serif}
#buyWhatsApp {position:relative;top:0;margin:0;}
#buyWhatsApp{background-color:rgba(0,0,0,0.5);position:fixed!important;display:flex!important;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s}
.formWhatsApp {position: relative;
display: block;
width: 100%;
margin: 10px 0;
padding: 0;}
.gridWhatsApp {grid-template-columns: 1fr 1fr;display: grid;grid-gap: 10px;}
.gridWhatsApp .item {
position: relative;
display: block;
width: 100%;
margin:0;
padding: 0;
}
.gridWhatsApp .item input, .formWhatsApp select {position: relative;
z-index: 1;font-family: Roboto,sans-serif;font-size:13px;
border: none;outline:none;
box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.08);
padding: 10px 15px;
width: 100%;
padding-left: 40px;
background: 0 0;box-sizing: border-box;}
.gridWhatsApp .item i, .formWhatsApp i {
position: absolute;
z-index: 0;
display: inline-block;
vertical-align: top;
width: 40px;
text-align: center;
font-size: 120%;
height: auto;
background: 0 0;
box-shadow: none;
top: 8px;
left: 0;
color: rgba(0,0,0,.2);
}
.formWhatsApp select {-webkit-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance:none;
text-align:left;}
.orderBank {color:#626262;background: #f1f1f1;
list-style: none;
margin: 0 0 25px;
padding: 13px 20px;}
.orderBank i {font-size:90%}
input[type="radio" i] {
background-color: initial;
cursor: default;
-webkit-appearance: radio;
box-sizing: border-box;
margin: 3px 3px 0 5px;
padding: initial;
border: initial;
}
.tabs .tab-selector-1:checked~.content .content-1, .tabs .tab-selector-2:checked~.content .content-2, .tabs .tab-selector-3:checked~.content .content-3 {
opacity: 1;
display:grid;grid-gap:8px;
height: auto;grid-template-columns:1fr 1fr;
width: 100%;
height: auto;
padding: 10px;
}
.content-1, .content-2, .content-3 {
position: relative;
width: 0;display: flex;
height: 0;
box-sizing: border-box;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
}
@media (min-width: 768px){
.popup-container, .container-contact100{width:calc(100% - 20px);}}
@media (max-width: 767px){
.popup-container, .container-contact100 {width:calc(100% - 20px);}}
.popup-container{display:block;margin:auto auto}
a.closeWhatsApp{display:block;color:#aaa;padding:0 20px;cursor:pointer;font-size:30px;font-weight:300;transition:.2s}
/* CSS POP-ICE */
.popup-form{margin:10px auto}
.popup-form h2{margin-bottom:5px;font-size:37px;text-transform:uppercase}
.popup-form .input-group{margin:10px auto}
.popup-form .input-group input{padding:17px;text-align:center;margin-bottom:10px;border-radius:3px;font-size:16px;display:block;width:100%}
.popup-form .input-group input:focus{outline-color:#fb8833}
.popup-form .input-group input[type="email"]{border:0;position:relative}
.popup-form .input-group input[type="submit"]{background-color:#fb8833;color:#fff;border:0;cursor:pointer}
.popup-form .input-group input[type="submit"]:focus{box-shadow:inset 0 3px 7px 3px #ea7722}
/* FORM */
a:focus {outline: none !important;}
a:hover {text-decoration: none;}
p {font-size: 14px;line-height: 1.7;color: #666666;margin:0px;}
input, textarea {outline: none;border: none;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input::-webkit-input-placeholder {color: #adadad;}
input:-moz-placeholder {color: #adadad;}
input::-moz-placeholder {color: #adadad;}
input:-ms-input-placeholder {color: #adadad;}
textarea::-webkit-input-placeholder {color: #adadad;}
textarea:-moz-placeholder {color: #adadad;}
textarea::-moz-placeholder {color: #adadad;}
textarea:-ms-input-placeholder {color: #adadad;}
button {outline: none !important;border: none;background: transparent;}
button:hover {cursor: pointer;}
iframe {border: none !important;}
/* Contact */
.container-contact100{width:550px;margin:auto;display:block;padding:0;background:#fff;border-radius:4px}
.wrap-contact100{width:550px;overflow:hidden;padding:0;display:block;border-radius:4px}
.data-form{box-sizing: border-box;width:100%;background:#fff;margin:0;padding:0 20px;overflow-y:auto;display:block;max-height:calc(100vh - 80px)}
.title-beli{display:grid;width:100%;grid-template-columns:1fr auto;grid-column-gap:10px;margin:0;height:60px;line-height:60px;font-size:14px;background:#fff;font-weight:400}
.data-form-title{padding:0 20px;display:block;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#444;font-size:110%}
.data-form-title .fa-whatsapp {color:#0CC243}
.rianseo-area{display:grid;grid-template-columns:1fr auto;grid-gap:10px;padding:20px;width:calc(100% + 40px);margin-left:-20px;margin-top:-20px;margin-bottom:20px}
/* Input */
.wrap-input100{width:100%;position:relative;padding:0;display:grid;grid-gap:10px;grid-template-columns:1fr 1fr;margin-bottom:10px}
.label-input100{font-family:Helvetica,sans-serif;font-size:13px;color:#666;font-weight:700;line-height:1.5;padding:0}
.input100{display:block;width:100%;background:transparent;border:0;font-size:13px;box-shadow:inset 0 -1px 0 0 rgba(0,0,0,.08);color:#333;line-height:1.2;padding:10px 0}
.focus-input100{position:absolute;display:block;width:100%;height:100%;top:0;left:0;pointer-events:none}
.focus-input100::before{content:""display:block;position:absolute;bottom:-2px;left:0;width:0;height:2px;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s;background:#7f7f7f}
input.input100 {}
textarea.input100 {padding-top: 9px;padding-bottom: 13px;}
.input100:focus+.focus-input100::before {width: 100%;}
.has-val.input100+.focus-input100::before {width: 100%;}
/* Button */
.sendWhatsApp {display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;justify-content:center;padding:0}
.sendWAcolor {width:100%;display:block;position:relative;z-index:1;overflow:hidden;margin:10px 0 15px 0}
.sendWAbuttom {position:relative;margin-bottom:10px;z-index:-1;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
.sendWAclik{cursor:pointer;display:block!important;border:0;text-align:center!important;padding:10px 20px!important;font-size:105%;font-weight:700!important;background:#4CAF50;color:#fff!important;box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.08)}
.sendWAcolor:hover .sendWAbuttom {left: 0;}
/* Responsive */
@media (max-width: 576px) {.wrap-contact100 {width:100%;display:block;}
.container-contact100 {width:100%;}
.sendWhatApp {padding:0;}}
Tahap Kedua kalian Copy Kode HTML di Bawah ini, kemudian pastekan di bawah kode CSS tadi.
<div class='popup-wrapper' id='buyWhatsApp'>
<div class='popup-container'>
<div class='container-contact100'>
<div class='wrap-contact100'>
<h2 class='title-beli'>
<span class='data-form-title'>
<i class='fab fa-whatsapp'></i> Hubungi via <b>WhatsApp</b></span>
</h2>
<!--=== HTML Form WhatsApp | @rian_seo ===-->
<div class='data-form validate-form' id='whatsapp'>
<ul class='orderBank'>
<!--=== HTML Pilihan Produk ===-->
<section class='tabs'>
<!--=== HTML Pilihan (1) ===-->
<input checked='checked' class='tab-selector-1' id='tab-1' name='radio-set' type='radio'/>
<label class='tab-label-1' for='tab-1'>Paket 1</label>
<!--=== HTML Pilihan (2) ===-->
<input class='tab-selector-2' id='tab-2' name='radio-set' type='radio'/>
<label class='tab-label-2' for='tab-2'>Paket 2</label>
<!--=== HTML Pilihan (3) ===-->
<input class='tab-selector-3' id='tab-3' name='radio-set' type='radio'/>
<label class='tab-label-3' for='tab-3'>Paket 3</label>
<!--=== HTML Data Produk ===-->
<div class='content'>
<!--=== HTML Produk (1) ===-->
<div class='content-1'>
<span><b>Type:</b></span><span>Iklan Sidebar</span>
<span><b>Ukuran :</b></span><span>Persegi Responsive</span>
<span><b>Harga :</b></span><span>Rp. 500.000/Bulan</span>
</div>
<!--=== HTML Produk (2) ===-->
<div class='content-2'>
<span><b>Type :</b></span><span>Iklan Header</span>
<span><b>Ukuran :</b></span><span>Lenscape Responsive</span>
<span><b>Harga :</b></span><span>Rp. 750.000/Bulan</span>
</div>
<!--=== HTML Produk (3) ===-->
<div class='content-3'>
<span><b>Type 3_1 :</b></span><span>Iklan di Tengah Postingan</span>
<span><b>Type 3_2 :</b></span><span>Iklan di Bawah Postingan</span>
<span><b>Type 3_3 :</b></span><span>Iklan di Atas Postingan</span>
<span><b>Ukuran :</b></span><span>Lenscape Responsive</span>
<span><b>Harga :</b></span><span>Rp. 750.000/Bulan</span>
</div>
</div>
</section>
</ul>
<!--=== HTML Pilihan Pembayaran ===-->
<input class='tujuan' id='noAdmin' type='hidden'/>
<label class='formWhatsApp'>
<i class='fa fa-angle-down'></i>
<select class='licensi wajib' placeholder='Pembayaran'>
<option hidden='hidden' selected='selected' value='default'>Pilih Pembayaran</option>
<!--=== HTML Data Pembayaran ===-->
<optgroup label='Pilih Pembayaran'>
<option value='Transfer Bank BCA | 0561xxxxxx'>Transfer Bank BCA | 0561xxxxxx</option>
<option value='Pembayaran Tunai'>Pembayaran Tunai</option>
</optgroup>
</select>
</label>
<!--=== HTML Table Form Pesanan ===-->
<div class='gridWhatsApp'>
<label class='item'>
<!--=== From Nama ===-->
<i class='fa fa-user-circle'></i>
<input class='nama wajib' placeholder='Nama..' type='text'/>
</label>
<label class='item'>
<!--=== From Email ===-->
<i class='fa fa-envelope'></i>
<input class='email wajib' placeholder='Email..' type='text'/>
</label>
</div>
<br/>
<!--=== HTML Table Form (2) ===-->
<div class='gridWhatsApp'>
<label class='item'>
<!--=== From Nomor WhatsApp ===-->
<i class='fab fa-whatsapp'></i>
<input class='nomor wajib' placeholder='WhatsApp..' type='tel'/>
</label>
<label class='item'>
<!--=== From Nama Kota ===-->
<i class='fa fa-university'></i>
<input class='kota wajib' placeholder='Kota..' type='url'/>
</label>
</div>
<!--=== HTML Opsi Form Produk ===-->
<label class='formWhatsApp'>
<i class='fa fa-angle-down'></i>
<select class='pembayaran wajib' placeholder='Pembayaran'>
<option hidden='hidden' selected='selected' value='default'>Pilihan Paket</option>
<optgroup label='Pilihan Paket'>
<option value='Paket 1'>Paket 1</option>
<option value='Paket 2'>Paket 2</option>
<option value='Paket 3 Type 3_1'>Paket 3 Type 3_1</option>
<option value='Paket 3 Type 3_2'>Paket 3 Type 3_2</option>
<option value='Paket 3 Type 3_3'>Paket 3 Type 3_3</option>
</optgroup>
</select>
</label>
<label class='formWhatsApp'>
<i class='fa fa-angle-down'></i>
<select class='informasi wajib' placeholder='Informasi'>
<option hidden='hidden' selected='selected' value='default'>Status Iklan Banner..?</option>
<optgroup label='Status Iklan Banner..?'>
<option value='Ready'>Ready</option>
<option value='Belum Ada'>Belum Ada</option>
</optgroup>
</select>
</label>
<div class='sendWhatsApp'>
<div class='sendWAcolor'>
<div class='sendWAbuttom'/>
<a class='sendWAclik submit' onclick='redirect('/p/terimakasih.html')'>Kirim</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Terakhir copy Code Javascript di bawah ini dan kemudian Paste tepat di bawah kode HTML yang tadi.
<script>
//<![CDATA[
Isi dengan Kode Java Script.
//]]></script>
$('#noAdmin').val('0823-5926-3675');// Nomor Tujuan
$('.whatsapp-btn').click(function () {
$('#whatsapp').toggleClass('toggle');});
// Fungsi Tombol Whatsapp Kirim!
$('#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})$/;
// Fungsi Data Tulisan yang dikirim
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 .website').focus();
return false;
} else if ($('#whatsapp .nomor').val() == '') { // Cek nomor
ph = $('#whatsapp .nomor').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .nomor').focus();
return false;
} else if ($('#whatsapp .kota').val() == '') { // Cek kota
ph = $('#whatsapp .kota').attr('placeholder');
alert('Silahkan tulis ' + ph);
$('#whatsapp .email').focus();
return false;
} else if ($('#whatsapp .licensi').val() == '') { // Cek licensi
ph = $('#whatsapp .licensi').attr('placeholder');
alert('Silahkan pilih ' + ph);
$('#whatsapp .licensi').focus();
return false;
} else if ($('#whatsapp .pembayaran').val() == '') { // Cek bayar
ph = $('#whatsapp .pembayaran').attr('placeholder');
alert('Silahkan pilih ' + ph);
$('#whatsapp .pembayaran').focus();
return false;
} else if ($('#whatsapp .informasi').val() == '') { // Cek dari
ph = $('#whatsapp .informasi').attr('placeholder');
alert('Silahkan pilih ' + ph);
$('#whatsapp .informasi').focus();
return false;
} 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,
licensi =$('#whatsapp .licensi').val(),
nama = $('#whatsapp .nama').val(),
email = $('#whatsapp .email').val(),
nomor = $('#whatsapp .nomor').val(),
kota = $('#whatsapp .kota').val(),
pembayaran = $('#whatsapp .pembayaran').val(),
informasi = $('#whatsapp .informasi').val();
$(this).attr('href', url_wa + '?phone=62 ' + tujuan + '&text=' +
' %2AMetode Pembayaran%2A: ' + licensi + '%0A' +
'_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _%0A' +
' %0A%2ANama%2A: ' + nama +
' %0A%2AEmail%2A: ' + email +
' %0A%2ANomor WhatsApp%2A: ' + nomor +
' %0A%2AKota%2A: ' + kota + '%0A' +
'_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _%0A%0A' +
' %0A%2APilihan Paket%2A: ' + pembayaran + '%0A' +
' %0A%2AStatus Iklan Banner%2A: ' + informasi + '%0A' +
' %0A%2ADari%2A ' + 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;
}
}
Nah yang saya tandai dengan huruf Tebal di atas silahkan anda ganti dengan nomor Hp tujuan.
Akhir kata silahkan agan simpan dan lihat hasilnya.
0 Komentar