Home Blogger Tutorial
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Cara Membuat Bottom Menu Beserta Contact Form Whatsapp di Blog

Zyrush
Zyrush
Updated: • 0 • min read
Table of Contents
Hallo Sobat Zyrush, Kali ini saya akan membagikan tutorial lagi,kali ini tutorial "Cara Membuat Bottom Menu Beserta Contact Form" Caranya cukup mudah.karena blog ini sudah berganti template.karena template yang dullu cukup rendah Skor PageSpeed.ketika saya menggunakan template ini alhamdulillah ada kemajuan blog saya.jadi saya berfikir untuk mengganti template pada blog ini.tapi tenang di sini saya akan bagikan tutorial desain saya membuat Bottom Menu di Blog

Buttom ini sangat keren untuk kamu coba pasang di blog kamu disini saya tambahkan contact from whatsapp agar lebih mantap lagi blog anda yang ingin konsultasi atau apapun lewat whatsapp dan bisa kamu tambahkan akun social media kamu di Bottom Menu tersebut.

Baiklah sebelum kita membuat Buttom Menu kamu bisa siapkan kopi atau cemilan karena script ini lumayan panjang karena saya menggapungkan script Contact From Whatsapp dengan Bottom Menu. "Perlu diketahui Bottom Menu ini hanya muncul di Mobile/Ponsel saja" 

Langkah Pertama Membuat Contact Form Whatsapp Terlebih dahulu

Untuk Blogger Versi Lama
Buka Blogger ⇢Login Ke Akun Blogger Anda⇢Tema⇢Edit Tema
Untuk Blogger Versi Baru
Buka Blogger ⇢Login Ke Akun Blogger Anda⇢Tema⇢Cari Titik Tiga⇢Edit Tema

  • Cari Kode </head> lalu pastekan kode di bawah ini tepat di atasnya 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  • Kemudian masukkan kode di bawah ini tepat di atas Tag </style> atau </b:skin>  
/* Widget Contact Whatsapp */
div#pelajar{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-99;opacity:0;transition:.5s;background:rgba(0,0,0,.5)}div#pelajar.active{z-index:9999;opacity:1}div#whatsapp{position:fixed;top:50%;left:50%;max-width:480px;width:95%;background:#fff;transform:translate(-50%,-50%);z-index:-1;opacity:0;border-radius:5px;overflow:hidden;box-shadow:0 2px 5px rgba(0,0,0,.5);transition:.5s}div#whatsapp.active{z-index:999999;opacity:1}p.wa-title{margin:0;padding:15px;font-size:16px;text-align:center;font-weight:700;background:#2ecc71;color:#fff}.wa-body{padding:14px;display:flex;flex-wrap:wrap;width:100%;box-sizing:border-box}.wa-input{border:1px solid #ddd;border-radius:3px;line-height:32px;padding:0 10px;box-shadow:inset 0 0 2px rgba(0,0,0,.1)}.wa-input.bagi{width:48%;margin:1%;margin-bottom:10px}.wa-input.full{width:98%;resize:none;min-height:150px;margin:0 1%}a.submit{line-height:24px;padding:10px 15px;width:100%;max-width:200px;text-align:center;background:#2ecc71;margin:14px auto 0 auto;display:block;color:#fff;border-radius:3px;cursor:pointer}span.wa-x{position:absolute;top:5px;right:5px;height:30px;width:30px;border:2px solid #fff;border-radius:50px;corsor:pointer}a#wa-icon{position:fixed;bottom:100px;left:30px;line-height:0;border-radius:30px;background:#2ecc71;padding:0;height:60px;width:60px;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.1);z-index:99}a#wa-icon::before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}span.wa-x::before{content:"";position:absolute;top:50%;left:50%;height:3px;width:50%;background:#fff;transform:translate(-50%,-50%)}@media (max-width:480px){.wa-input.bagi{width:100%;margin:0;margin-bottom:10px}a#wa-icon{bottom:10px;left:10px}.wa-input.full{width:100%;margin:0}}
  • Setelah itu masukkan kode html tepat di atas kode </body> 
<div class='pelajar' id='pelajar'>
</div>
<div id='whatsapp'>
<span class='wa-x' onclick='closeModal()'/>
<p class='wa-title'>Contact Form</p>
<div class='wa-body'>
<input class='tujuan' type='hidden' value='ISI NOMER WHATSAPP KAMU'/>
<!-- No. WhatsApp -->
<input class='nama wa-input bagi' placeholder='Nama Lengkap..' type='text'/>
<input class='email wa-input bagi' placeholder='Alamat E-mail..' type='email'/>
<textarea class='pesan wa-input full' placeholder='Pesan..'/>
<a class='submit'>Kirim</a>
</div>
</div>
  • Huruf yang bertanda biru bisa kamu ganti dengan No Whatsapp kamu
  • Selanjutnya letakkan kode di bawah ini setelah kode di atas
<script> //<![CDATA[
function closeModal() {
document.getElementById('pelajar').classList.remove('active')
document.getElementById('whatsapp').classList.remove('active')
}
function openModal() {
document.getElementById('pelajar').classList.add('active')
document.getElementById('whatsapp').classList.add('active')
}




// Onclick Whatsapp Sent!
$('#whatsapp .submit').click(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>

Kamu sudah menerapkan widget Contact Form Whatsapp Sekarang kita buat Bottom Menunya

  • Langkah berikutnya cari tag penutup footer </footer> kemudian tambahkan kode di bawah ini tepat di atasnya 
<div class='menubottom '><!--float menubottom by gurudzgn.com--> 
      <nav>
        <ul>
          <li class='ripple'>
            <a href='/' itemprop='url' title='Home'><svg height='24' viewBox='0 0 24 24' width='24'>
<path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg><span itemprop='name'>Home</span></a>
          </li>
          <li class='ripple'>
            <a href='#' itemprop='url' title='Facebook'><svg viewBox='0 0 24 24'>
            <path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z'/>
          </svg><span itemprop='name'>Favebook</span></a>
          </li>
          <li class='ripple'>
            <a class='menu-toggle' href='javascript:;' itemprop='url' title='Menu'><svg viewBox='0 0 24 24'>
            														<path d='M16.803,18.615h-4.535c-1,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.535C18.616,17.803,17.804,18.615,16.803,18.615zM17.71,12.268c0-0.502-0.405-0.906-0.907-0.906h-4.535c-0.501,0-0.906,0.404-0.906,0.906v4.535c0,0.502,0.405,0.906,0.906,0.906h4.535c0.502,0,0.907-0.404,0.907-0.906V12.268z M16.803,9.546h-4.535c-1,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.534C18.616,8.734,17.804,9.546,16.803,9.546zM17.71,3.198c0-0.501-0.405-0.907-0.907-0.907h-4.535c-0.501,0-0.906,0.406-0.906,0.907v4.534c0,0.501,0.405,0.908,0.906,0.908h4.535c0.502,0,0.907-0.406,0.907-0.908V3.198z M7.733,18.615H3.198c-1.002,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.535C9.547,17.803,8.735,18.615,7.733,18.615zM8.64,12.268c0-0.502-0.406-0.906-0.907-0.906H3.198c-0.501,0-0.907,0.404-0.907,0.906v4.535c0,0.502,0.406,0.906,0.907,0.906h4.535c0.501,0,0.907-0.404,0.907-0.906V12.268z M7.733,9.546H3.198c-1.002,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.534C9.547,8.734,8.735,9.546,7.733,9.546z M8.64,3.198c0-0.501-0.406-0.907-0.907-0.907H3.198c-0.501,0-0.907,0.406-0.907,0.907v4.534c0,0.501,0.406,0.908,0.907,0.908h4.535c0.501,0,0.907-0.406,0.907-0.908V3.198z'/>
          </svg><span itemprop='name'>Menu</span></a>
          </li>
          <li class='ripple'>
            <a href='#' itemprop='url' title='Instagram'><svg viewBox='0 0 24 24'>
            														<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'/>
          </svg><span itemprop='name'>Instagram</span></a>
          </li>
          <li class='ripple'>
            <a href='javascript:void(0);' itemprop='url' onclick='openModal()' title='Show Chat'><svg height='24' viewBox='0 0 24 24' width='24'>
							<path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/></svg><span itemprop='name'>WhatApp</span></a>
          </li>
        </ul>
      </nav>
    </div>
  • Kamu bisa ganti Yang Ditandai Huruf biru dengan Link Akun Facebook Dan Instagram Kamu untuk menu kamu harus ganti dengan link Menu navigasi kamu,jika tidak ada bisa di ganti dengan menu lain dan ganti icon svgnya
  • Kemudian tambahkan kode css di bawah ini tepat di atas tag </body> atau </head> 
<style>
/* Menunavbottom */
.menubottom{display:none}@media screen and (max-width:800px){.menubottom{position:relative/*fixed*/;right:0;left:0;z-index:99;/*add*/bottom:0}.menubottom nav ul{display:flex!important;width:100%!important;padding-left:0;justify-content:space-between!important;margin-bottom:0;flex-direction:row!important;list-style:none}.menubottom nav ul li{width:100%!important;list-style:none;}.menubottom nav ul li a{display:block;text-decoration:none;padding:.4rem 1rem}.menubottom nav ul li a svg{width:25px;height:25px;fill:#9aa3a9;}.menubottom nav ul li a span{color:#4b4f56;position:relative;font-size:8px;display:block;top:-5px}#openShare{display:block}#closeShare{display:none}#jpthemeFooter{padding-bottom:55px;position:relative;}}@media screen and (max-width:768px){.menubottom{left:0;text-align:center;width:100%;position:fixed;display:block}.menubottom nav{background-color:rgb(255,255,255);background-image: linear-gradient(110deg,rgba(33,150,243,0.1) 16%,rgba(33,150,243,0.1) 17%,rgba(33,150,243,0.05) 17%,rgba(33,150,243,0.05) 23%,transparent 8.5%,transparent 78%,rgba(33,150,243,0.05) 78%,rgba(33,150,243,0.05) 84%,rgba(33,150,243,0.1) 84%,rgba(33,150,243,0.1));display:block!important;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 -1px 3px rgba(0,0,0,.3);}.menubottom ul li{float:left;width:100px;height:100%;transition:/*background-color 0.2s linear 0s*/;transition:/*all .5s linear*/;background-position:center;display:block}
.float_wrapper_menubottom{position:fixed;left:0;bottom:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);font-family: &#39;Quicksand&#39;, -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, &#39;Oxygen-Sans&#39;, &#39;Helvetica Neue&#39;, Arial, sans-serif;}.floatscroll{bottom:0}.floatno-scroll{bottom:-55px;}.jpthemeMenu .menu-toggle{display:none}.jpthemeMenu .back-toggle{display:block!important}}.jpthemeMenu .back-toggle{display:none}
</style>

Selesai Langkah Terakhir Simpan Template


Perlu di ingat Menu Bottom ini berfungsi di Mobile/Ponsel saja,dan di desktop/PC tidak akan muncul icon svg bisa kamu ganti sesuka hati tetapi untuk whatsapp saran saya tidak usah karena linknya sudah tepat dengan kode Contact from whatsapp.jika ada kesalahan pada script bisa komen di bawah nanti saya akan update artikel ini.Terimakasih sudah berkunjung~


Zyrush
Zyrush Hallo I'm Zyrush

Post a Comment