Oke malem sobat. Pada kesempatan kali ini, saya akan membagikan sebuah menu mavigasi. 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 Top Menu Navigasi diatas Header Untuk Privacy Policy
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}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>6. Copy & Paste Kode JQuery Berikut, dan Letakkan dibawah kode <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'/>Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy
