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}
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==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' 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  atau <head>.
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'/>
7. Simpan Template.

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

11 Responses to "Cara Membuat Top Menu Navigasi diatas Header Untuk Privacy Policy"

  1. trimkasih gan, saya suda terapkan ke blog saya, hasilnya joss...gadingmasvideo.blogspot.co.id

    ReplyDelete
  2. makasiiih banyaaak, Mas :)

    ReplyDelete
    Replies
    1. sama-sama :). Makasih sudah berkunjung ^_^

      Delete
  3. gan kok gak di top ya malah di bawah title blog

    ReplyDelete
  4. Gan solusi biar bisa dibuka saat tampilan hp gimana, ?

    ReplyDelete
  5. jadi berantakan malah header blog ane gan

    ReplyDelete
  6. Coba menu yang sudah dipasang dilepas dulu baru pasang script kode diatas.

    ReplyDelete
  7. tampilan nya ga pas dengan ukuran template nya, rada keluar dari template nya..

    ReplyDelete
    Replies
    1. Maksimalkan atau ubah saja lebar dan tinggi di kode CSS nya..

      Delete
  8. Terimakasih 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