Membuat Top Menu dengan Kotak Pencarian di Blog.

Top Menu Dengan Kotak Pencarian - Top menu adalah hanya sekedar menu tambahan dari menu navigasi, biasanya Top menu ini digunakan untuk Link,About,Sitemap,Contact,Disclaimer,etc.

Top menu ini biasa digunakan diatas header, jika anda bingung cara pemasangan pada top menu anda bisa cari kode seperti ini <header atau 'header-wrapper' pada umumnya header menggunakan kode seperti itu, jika sudah ketemu letakan kode pada tutorial dibawah ini di atas header supaya blognya makin Joss.

Untuk yang ingin tau seperti apa Top Menu dengan Kotak Pencarian itu bisa lihat demo dibawah :

Demo

Langsung ke Tutorialnya oke.

1. Login Blogger tentunya

2. Masuk Dashboard Blogger > Menu Blogger > Template

3. Pada Template blogger Klik Edit HTML

4. Cari <header lalu paste kode dibawah ini tepat diatas kode <header

<div id='nav-wrap'>
<nav class='menu'>

<ul class='nav-menu'>
<li><a href='erikshared.my.id'>About</a></li>
<li><a href='erikshared.my.id'>Contact Us</a></li>
<li><a href='erikshared.my.id'>Privacy Policy</a></li>
<li><a href='erikshared.my.id'>Disclaimer</a></li>
</ul>


<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>

</nav>
<div class='clear'></div>
</div>

5. Lalu tinggal kita buat CSS nya. Letakan CSS dibawah dengan mencari kode ]]></b:skin> pada template.

/* ERIKSHARED TOP MENU */
.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}

6. Tinggal Simpan Top menu tadi.

Ohiya jika tidak tampil font awesome nya. Kalian harus memasang dulu font awesome. Simpan kode ini diatas </head> atau juga bisa di bawah <head>

<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'/>

Nahh segitu dulu tutorial dari saya gan. Semoga blog Kamu kalau pake Top Menu ini bisa menjadi lebih Enak diliat :v #GueNgomongApaSih

Author : Ngasal

Saya hanya Anak SMP Yang baru Mengenal Dunia Komputer. Saya Newbie. Belum Terlalu Mahir dengan Komputer. Namun Saya Mencoba mengenal Dunia Blogging. Saya Cuma Script Kiddie dan masih pada tahap Pembelajaran :)

Membuat Top Menu dengan Kotak Pencarian di Blog.

Author : Ngasal

Share this

Related Posts