Cara mudah membuat Menu Bar Footer

September 19, 2018 Snippets,Tips dan Trik,WordPress Kholis Muhaimin

Hmm,,apa ya namanya ini? Saya menyebutnya Menu Bar Footer, dan fitur apakah ini? Jadi fitur Menu Bar Footer cuma akan muncul kalo dibuka via browser smartphone, kalo dibuka via PC engga muncul.

Pada tutorial ini, penulis menggunakan custom theme WordPress dengan framework Bootstrap 4. Script nya cukup singkat dan engga ribet, saya taro di file footer.php kemudian sedikit css. Untuk icon2 nya, penulis menggunakan Font Awesome.

Ok, tahap selanjutnya adalah praktek! Copy paste script di bawah ini ke footer.php kamu


<div class="nav-fixed-bottom">
<nav class="nav">
<a class="nav-link kholisnet" href="tel:+62370-6173082" onclick="goog_report_conversion('tel:62370-6173082')" title="Telepon"><i class="fa fa-phone"></i> <span>Telepon</span></a>
<a class="nav-link kholisnet" href="https://wa.me/628533800050" title="Whatsapp"><i class="fa fa-whatsapp"></i> <span>Whatsapp</span></a>
<a href="mailto:percutianlombok@gmail.com" class="search-tour nav-link kholisnet" title="Cari Tour" data-toggle="modal" data-target="#searchtour-modal"><i class="fa fa-envelope"></i> <span>Email</span></a>
</nav>
</div>

Kemudian kita membutuhkan css agar tampilannya menarik, copy paste script di bawah ini ke file css kamu.


.nav-fixed-bottom {
display: block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fe6e00;
z-index: 99;
-webkit-box-shadow: 0 -3px 5px 0px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 -3px 5px 0px rgba(0, 0, 0, .15);
box-shadow: 0 -3px 5px 0px rgba(0, 0, 0, .15);
}

a.nav-link.kholisnet{width: 33.33333%;padding: 20px 15px!important;font-size: 13px;color: #fff;border-right: solid 1px #fff;}
a.nav-link.kholisnet:last-child{border-right: none;}

Sekarang buka website kamu melalui browser smartphone mu, jika berhasil akan muncul Menu Bar Footer seperti pada gambar di bawah ini.

Klik untuk memperbesar gambar

Ada pertanyaan? Komen ya 🙂

62 total views, 1 views today

Facebooktwittergoogle_plusredditpinterestlinkedinmail