Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy
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
Related Post
trimkasih gan, saya suda terapkan ke blog saya, hasilnya joss...gadingmasvideo.blogspot.co.id
ReplyDeletemakasiiih banyaaak, Mas :)
ReplyDeletesama-sama :). Makasih sudah berkunjung ^_^
Deletegan kok gak di top ya malah di bawah title blog
ReplyDeleteGan solusi biar bisa dibuka saat tampilan hp gimana, ?
ReplyDeleteerroe bos
ReplyDeletejadi berantakan malah header blog ane gan
ReplyDeleteCoba menu yang sudah dipasang dilepas dulu baru pasang script kode diatas.
ReplyDeletetampilan nya ga pas dengan ukuran template nya, rada keluar dari template nya..
ReplyDeleteMaksimalkan atau ubah saja lebar dan tinggi di kode CSS nya..
DeleteTerimakasih telah membantu, saya sukses memasang, di sebalah kiri, juga bisa di anan.coba di tengah. biar seimbang.. belum bisa, kira kira apanya di rubah gan?
ReplyDelete