Membuat Top Menu dengan Kotak Pencarian di Blog
20 April 2015
Top Menu With Search Form - Top menu adalah hanya sekedar menu tambahan dari menu navigasi, biasanya Top menu ini digunakan untuk Link, About, Sitemap, Contact, dll. Menu kali ini bukan hanya berisi Link tapi juga dilengkapi dengan Kotak Pencarian yang keren dan simple.
Top menu ini biasa digunakan diatas header, jika anda bingung cara pemasangan pada top menu anda bisa cari kode seperti ini
Biar gak bingung hasilnya seperti apa lihat demonya dulu dehh...
(Rekomendasi) Tambahan supaya font/text dapat berjalan lancar dan keren jika belum memasang font Condensed dan font Awesome letakan link font dibawah ini di atas
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 ganteng. :DBiar gak bingung hasilnya seperti apa lihat demonya dulu dehh...
Nah sekarang Tutorial cara pemasangannya nih..
(Jangan takut susah masangnya, ini gampang kok..)
- ke Blogger > Template > Edit HTML
Pertama adalah kode HTML, letakan di atas header (rekomendasi)
<div id='nav-wrap'>
<nav class='menu'>
<!-- idblanter.com top menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>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>
Selanjutnya adalah CSS, apa fungsi CSS ini? yaitu membuat Top menu ini menjadi terlihat menarik dan keren.. letakan CSS di atas
]]></b:skin> atau </style>
(CSS adalah singkatan dari Cascading Style Sheet)
/* BLANTER 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}(Rekomendasi) Tambahan supaya font/text dapat berjalan lancar dan keren jika belum memasang font Condensed dan font Awesome letakan link font dibawah ini di atas
</head> atau dibawah <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'/>Semoga blog anda/sobat bisa menjadi ganteng yaa.. :)
dan semoga tutorial ini bermanfaat biar gak sia2 saya bikin tutor seperti ini..