Cara Membuat Top Menu Plus Kotak Pencarian di Atas Header

Cara Membuat Navigasi Menu Plus Kotak Pencarian (Search Box) di Atas Header Blog.

TIPS desain ini lanjutan tips sebelumnya tentang navigasi menu di atas header blog. Kali ini ada plusnya, yakni navbar menu plus kotak pencarian. Contohnya seperti topmenu di atas blog CB ini.

1. Blogger Dashboard >> Template >> Edit HTML
2. Copas kode berikut ini di atas kode  ]]></b:skin>

 /* CSS FOR SEARCH BAR STARTS */  

 #search{width:330px; border:none;background:transparent;height:32px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB}  

 #search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}  

 #search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}  

 #search-wrap{padding:15px 0}  

 .topsearch #search{margin-top:0;margin-bottom:0}  

 /* CSS FOR MENU BAR STARTS */   

 .shadowblockmenu{  

 font-weight: bold;  

 font-size: 85%;  

 width: 980px;  

 background-color: #eeeded; -webkit-box-shadow: 0 10px 10px #666;

 }  

 .shadowblockmenu ul{  

 border: 1px dotted #BBB;  

 border-width: 0px 0;   

 padding: 0;  

 margin: 0;  

 overflow: hidden;  

 }  

 .shadowblockmenu ul li{  

 display: inline;  

 margin:0;  

 padding:0;  

 }  

 .shadowblockmenu ul li a{  

 display:block;  

 float:left;  

 text-transform: none;  

 color: black;  

 padding: 8px 15px 8px 9px;  

 margin: 0;  

 text-decoration: none;  

 }  

 .shadowblockmenu li:nth-of-type(1) a{   

 padding-left:25px;  

 }  

 .shadowblockmenu li:nth-of-type(2) a{   

 padding-left:25px;  

 }  

 .shadowblockmenu li:nth-of-type(3) a{   

 padding-left:25px;  

 }  

 .shadowblockmenu li:nth-of-type(4) a{   

 padding-left:25px;  

 }  

 .shadowblockmenu li:nth-of-type(5) a{   

 padding-left:25px;  

 }  

.shadowblockmenu ul li a:hover{  

 color: yellow;  

 } 

Note: sesuaikan lebarnya dengan lebar header blog Anda (angka berwarna merah).

3. Copas kode berikut ini di atas kode <div id='header-wrapper'>

<div class='shadowblockmenu'>  


 <ul>  

 <li><a href='#'>Home</a></li>  

 <li><a href='#'>About</a></li>  

 <li><a href='#'>Contact</a></li>  

 <li><a href='#'>Privacy Policy</a></li>  

 <li><a href='#'>Sitemap</a></li>  

 <li><div class='topsearch' style='float: right'>  

 <div class='clerfix' id='search'>  

   <form action='/search' id='searchform' method='get'>  

     <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search Here...'/>  

 <input class='buttonsubmit' name='submit' type='submit' value='Search'/>

   </form>  

 </div>  

 </div>  

 <div style='clear:both;'/></li>  

 </ul>  

 </div>

NB:
- Kode header tiap template mungkin berbeda. Untuk pengguna New Johny Wuss, simpan kode tersebut di atas kode ini:

<div class='outerpic-wrapper'>
<div class='header-wrapper'>


- Ganti nama menu dan linknya dengan "kepunyaan" Anda.

4. Save Template!

Sudah.... beres.... segitu doang kok cara membuat top menu plus kotak pencarian di atas header.

Good luck and happy blogging!

Sumber