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

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

Catatan: jika tidak ada kode tersebut, cari kode , atau 

 
 

dan Copas kode berikut ini di atas-nya.

  


 
  

 
Home
  

 
About
  

 
Contact
  

 
Privacy Policy
  

 
Sitemap
  

 
  

 
  

   
  

       

 

     

 
  

 
  

 
  

   

 

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

- 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

reff : http://www.contohblog.com/2014/06/Top-Menu-Plus-Kotak-Pencarian-header-blog.html

Related video : Cara Membuat Top Menu Plus Kotak Pencarian di Atas Header