Disain Grafis, Tips dan Triks

Cara Membuat Menu Navigasi dan Tombol Search Diatas Header Blog

Cara Memasang Menu Navigasi dan Tombol Search di Atas Header - Menu navigasi bisa dibuat double untuk blog yang mempunyai menu atau kategori yang banyak. Biasanya menu navigasi terletak dibawah header dan untuk menambah menu navigasi + search diatas header blog caranya sangat mudah. Menu navigasi diatas header blog nantinya dapat anda isi dengan menu seperti contact, sitemap, atau disclamer atau apa saja menurut selera dan kebutuhan anda.

Cara Membuat Menu Navigasi dan Tombol Search Diatas Header
1. Login ke blogger
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

/* Top Menu */
.menuatas{font:13px Arial, verdana, Sans-Serif;color:#ccc;min-height:32px;background:#333;}.menuatas ul{margin:0;padding:0;}.menuatas li{list-style:none;float:left;display:inline;position:relative;margin:0;padding:0;}.menuatas li a{display:block;text-decoration:none;color:#ccc;line-height:32px;font-size:100%;padding:0 15px;}.menuatas li:hover &gt; a{background:#000;color:#fff;}
#menu-right{float:right;display:inline;width:260px;padding-top:5px;margin-right:10px}
#topsearch1 #feed-1{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#333}
#topsearch1 #feed-s{width:226px}
#search{height:18px;width:150px;background:#aeaeae;padding:0}
#search input{border:0;background:none;color:#575757}
#s{font-size:12px;width:120px;padding-left:4px;background:none;margin:0}
#topsearch #search{margin-top:0;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#fff;border:1px solid #999}
#topsearch #s{width:125px}

4. Lalu cari kode <div id='outer-wrapper'> dan letakkan kode berikut dibawahnya

Penerapannya seperti dibawah ini

<div id='outer-wrapper'>
<div class='menuatas'>
<ul>
<li><a href='/' title='Kembali ke Beranda'>Beranda</a></li>
<li><a href='/' title='Tentang'>Tentang</a></li>
<li><a href='/' title='Hubungi'>Kontak</a></li>
<li><a href='/' title='Pasang Iklan'>Pasang Iklan</a></li>
<li><a href='/' title='follow'>follow</a></li>
</ul>
<div id='menu-right'>
<div style='float:right'>
<div id='topsearch'>
<div id='search'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNA068rfFdIXHDrSAcgPWiUe2LLBhI8Uyw3PF5jRDENGnQ0n3TSxiDZdoGgmbdURviKvg-N2gf-qsl-47YzMocpdkSs8wqcF5a7JRb9QPtNrOTwEKAvt80JlKcoZ2p7Dc3t0DXgXptFEw/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
</form>
</div></div></div></div>
</div>
<div style='clear: both;'/>

Atau anda bisa meletakkan kode tersebut diatas/setelah kode <div id='header-wrapper'>

5. Simpan

Demikianlah tutorial blog yang singkat semoga bermanfaat.