Navigasi menu selalu penting untuk blog, ia menambah nilai yang signifikan karena dapat meningkatkan trafik, dan membuat pengunjung bertahan lebih lama di halaman web. Dan untuk membuat sebuah menu navigasi atau navbar perlu di pertimbangkan dua hal:
- Kemudahan. Pengunjung mudah mengerti bagaimana menggunakannya
- Ke indahan. Secara visual enak dipandang mata
Well, well itu semua subjektif, tetapi pada faktanya selalu ada bentuk desain yang disukai oleh lebih banyak pengunjung, bukan?
Kali ini saya akan membagikan trik membuat menu navigasi dan saya menerapkannya lagi lagi ke dalam template Essentials.
Cara ini akan menjadi opsi meletakan dan membuat menu tanpa batas dan membuatnya lebih fokus karena tampil penuh pada halaman. Jika ingin menampilkan menu tersebut cukup dengan menekan tombol menu hamburger.
Langkah menerapkannya adalah:
1. Memasang ajax
- Masuk ke pengaturan blogger
- Pilih tema
- Pilih Edit HTML
Anda di haruskan memasan link ajax supaya fungsi hamburger menu bekerja, dan memasang link font awesome agar ikon ikonnya muncul (Ini akan saya perbaiki dengan menggantinya dengan ikon ikon SVG). Copy dan pastekan ke atas tag </head>:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Memasang CSS
Masih di halaman editor HMTL blogger copy kode css berikut dan letakan di atas tag </head> kembali.
<style>body {
margin:0;
padding:0;
background:#fff;
font-family:'Montserrat',sans-serif;
font-size:12px;
}
ul {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
li {
padding:0;
margin:0;
}
nav {
text-align:center;
width:100%;
position:relative;
height:auto;
overflow:hidden;
background:none;
}
nav ul {
text-align:center;
}
nav ul li {
display:inline-block;
}
nav ul li a {
color:#fff;
display:inline-block;
padding:1em 3em;
margin-right:12px;
text-decoration:none;
border-bottom:2px solid transparent;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
font-size:16px;
}
nav ul li a:hover {
color: #555;
}
/*styling open close button*/
.button {
display:inline;
position:absolute;
right:50px;
top:10px;
z-index:999;
font-size:30px;
}
.button a {
text-decoration:none;
}
.btn-open:after {
color:#333;
content:"\f0c9";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;0
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
color:#333;
}
.btn-close:after {
color:#333;
content:"\f00d";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
color: #333;
}
/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:#fff;
overflow:auto;
z-index:99;
}
.wrap {
color:red;
text-align:center;
max-width:100%;
margin:0 auto;
}
.wrap ul.wrap-nav {
border-bottom:1px solid #333;
text-transform:capitalize;
padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
font-size:20px;
display:inline-block;
vertical-align:top;
width:24%;
position:relative;
}
.wrap ul.wrap-nav li a {
color:#333;
display:block;
padding:8px 0;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color:#CC0033;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:13px;
width:100%;
color:#333;
}
.wrap ul.wrap-nav ul li a {
color:#333;
}
.wrap ul.wrap-nav ul li a:hover {
color:#CC0033;
}
.social {
font-size:25px;
padding:20px;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:13px;
}
.social p a {
color:#333;
text-decoration:none;
margin:0;
padding:0;
}
.social-icon {
width:80px;
height:50px;
background:#fff;
color:#333;
display:inline-block;
margin:0 20px;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.social-icon:hover {
background:#CC0033;
color:#333;
}
.social-icon i {
margin-top:12px;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width:100%;
padding:20px 0;
border-bottom:1px solid #333;
}
.wrap ul.wrap-nav {
padding:30px 0px 0px;
}
nav ul {
opacity:0;
visibility:hidden;
}
.social {
color:#333;
font-size:25px;
padding:15px 0;
}
.social-icon {
width:100%;
height:50px;
background:#fff;
color:#333;
display:block;
margin:5px 0;
}
}
.content {
width:100%;
margin-top:200px;
font-size:20px;
color#333;
text-align: center;
}
<style type='text/css'>
#hbz-searchbox {
min-width: 250px;
margin: 10px auto;
border-radius: 3px;
overflow: hidden;
max-width: 300px;
}</style>
3. Memasang HTML
Cari kode </header> dan pasang kode berikut tepat di atasnya:
<nav>
<ul>
<li><a href='https://www.editblogtema.com'>Beranda</a></li>
<li><a href='#'>Privasi</a></li>
<li><a href='#'>TOC</a></li>
</ul>
<div class='button'>
<a class='btn-open' href='#'/>
</div>
</nav>
<form action='/search' id='hbz-searchbox' method='get'>
<input id='hbz-input' name='q' placeholder='Search...' type='text'/>
<input name='max-results' type='hidden' value='8'/>
<button id='hbz-submit' type='submit'>Search</button>
</form>
<div class='overlay'>
<div class='wrap'>
<ul class='wrap-nav'>
<li><a href='#'>Perihal</a>
<ul>
<li><a href='#'>Privasi</a></li>
<li><a href='#'>TOC</a></li>
<li><a href='#'>Perihal</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
</li>
<li><a href='#'>Blog</a>
<ul>
<li><a href='https://www.google.hr/'>Web Design</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Apps</a></li>
<li><a href='#'>Graphic design</a></li>
<li><a href='#'>Branding</a></li>
</ul>
</li>
<li><a href='#'>Lingkup Kerja</a>
<ul>
<li><a href='#'>Web</a></li>
<li><a href='#'>Graphic</a></li>
<li><a href='#'>Apps</a></li>
</ul>
</li>
</ul>
<div class='social'>
<a href='http://mario-loncarek.from.hr/'>
<div class='social-icon'>
<i class='fa fa-facebook'/>
</div>
</a>
<a href='#'>
<div class='social-icon'>
<i class='fa fa-twitter'/>
</div>
</a>
<a href='#'>
<div class='social-icon'>
<i class='fa fa-codepen'/>
</div>
</a>
<a href='#'>
<div class='social-icon'>
<i class='fa fa-instagram'/>
</div>
</a>
<a href='#'>
<div class='social-icon'>
<i aria-hidden='true' class='fa fa-linkedin'/>
</div>
</a>
</div>
</div>
</div>
3. Memasang JavaScript
Di dalam halaman editor HTML blogger cari kode </body> dan letakan kode javascript berikut tepat di atasnya:
<script>$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});</script>
Save template. Demikian cara membuat full mega menu dengan tombol hamburger pada template essentials. Jika Anda tidak menyukai font awesome karena memberatkan loading, ikon bisa diganti dengan SVG.
Dan trik ini tentu saja dapat diterapkan ke dalam template layout ke 2 dengan sama baiknya.