20 April 2015

Membuat Top Menu dengan Kotak Pencarian di Blog

Top Menu With Search Form

Top Menu With Search FormTop menu adalah hanya sekedar menu tambahan dari menu navigasi, biasanya Top menu ini digunakan untuk Link, AboutSitemapContact, 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 <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. :D

Biar 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==&#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>

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..
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic