Bismillah. Oke malem sobat MD. Pada Kesempatan Kali ini, Saya akan membagikan sebuah menu Navigasi. Menu Navigasi ini sering digunakan para Blogger untuk Bagian About, Contact Us, Privacy Policy dan Disclaimer. Sebelumnya saya pernah memposting Cara Membuat Menu Navigasi Berbasis Media Sosial. Tetapi kali ini, Saya akan membagikan Menu Navigasi Berbasis Kolom Search dibagian kanannya. Top Menu ini, Biasa digunakan diatas </header>. Anda bisa melihat Contoh Top Menu Navigasi ini, digambar diatas.
Baca Juga : Cara Membuat Menu Navigasi Plus Media Sosial
Cara Pertama :
1. Buka Blogger - Kemudian Login.
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan :
1. Temukan kode (CTRL + F ) ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </Style>
/* Top Menu Navigasion */
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:block;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}
.menu {
font:normal normal 13px Open Sans Condensed, Arial, sans-serif;
padding:0 0;
background:#ffffff;
margin:0 auto;
height:38px;
border:1px solid #f0f0f0;
overflow:hidden;
text-transform:uppercase;
}
.nav-menu {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.nav-menu li {
display:block;
float:left;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-right:1px solid #f0f0f0;
}
.nav-menu li a {
background:#ffffff;
color:#8D8D8D;
display:block;
padding:0 8px;
}
.nav-menu li a:hover {
background:#f5f5f5;
}
ul.nav-search {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:right;
}
.navsearch {
padding: 10px;
border-left: 1px solid #ddd;
color: #666;
border-top:1px solid #fff;border-bottom:1px solid #fff;border-right:1px solid #ddd;
transition:all 0.5s ease-out;
font:normal normal 14px Open Sans Condensed, Arial, sans-serif;
float:left;
}
.navsearch:focus {
background:#fafafa;
}
.subsearch {padding:10px;color:#555;font:normal normal 14px Open Sans Condensed, Arial, sans-serif;border:none;background:#fff;cursor:pointer;}
.subsearch:hover {background:#fafafa}
3. Temukan lagi kode (CTRL+F) kode <div class='header-wrapper'> atau </header>
4. Copy & Paste kode berikut ini, dan Letakkan tepat dibawah kode <div class='header-wrapper'> atau </header>.
<div id='nav-wrap'>
<nav class='menu'>
<!-- idblanter.com top menu start -->
<ul class='nav-menu'>
<li><a href='Your Link'>About</a></li>
<li><a href='Your Link'>Contact Us</a></li>
<li><a href='Your Link'>Privacy Policy</a></li>
<li><a href='Your Link'>Disclaimer</a></li>
</ul>
<!-- idblanter.com top menu end -->
<!-- search form start -->
<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>
<!-- search form end -->
</nav>
<div class='clear'></div>
</div>
<nav class='menu'>
<!-- idblanter.com top menu start -->
<ul class='nav-menu'>
<li><a href='Your Link'>About</a></li>
<li><a href='Your Link'>Contact Us</a></li>
<li><a href='Your Link'>Privacy Policy</a></li>
<li><a href='Your Link'>Disclaimer</a></li>
</ul>
<!-- idblanter.com top menu end -->
<!-- search form start -->
<ul class='nav-search'>
<form action='/search' method='get'>
<input class='navsearch' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...'/>
<button class='subsearch' type='submit'><i class='fa fa-search'></i></button>
</form>
</ul>
<!-- search form end -->
</nav>
<div class='clear'></div>
</div>
5. Jika sudah? Temukan lagi kode </head> atau <head>.
6. Copy & Paste Kode JQuery Berikut, dan Letakkan dibawah kode </head> atau <head>
Jika kode dibawah ini sudah dipasang, Jangan dipasang lagi.
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
7. Simpan Template^.^
Daaan Taraaa Menu Navigasi Sudah Muncul. Akhirnya selesai juga Cara Membuat Menu Navigasi diatas Header Untuk Privacy Policy. Bila terjadi kesalahan, Jangan Sungkan untuk berkomentar. Pasti komentar anda akan saya balas^.^