Cara membuat Top Menu Dan Kotak Pencarian

( BUAT TOP MENU DI BLOG ATAU WEB )

Kampoeng iLmu2 - Cara membuat Top Menu Dan Kotak Pencarian , Top Menu Adalah Menu Blog Atau Web Site Yang Ada Diatas Header. Menu Isi Dilengkapi Dengan Kotak Search !.Memudah Kan Pengunjung yang Berkunjung Bisa Langsung Melakukan Eksekusi Saat Ingin Mencari Sesuatu Yang Lain Diblog kamu !. 8)

Cara Membuatnya :

Pertama Kamu Masuk KeDasbor Blog Kamu !

Kedua Klik TEMPLATE >> EDIT HTML . :v

Ketiga Kamu Cari Kode HTML ]]></b:skin> Lalu Copy Kode CSS Dibawah Ini Dan Pastekan Tepat Diatas Kode CSS Tersebut. :3

#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;  

 } 

Keempat Cari Kode HTML <div id='header-wrapper'> Lalu Copy Kode HTML Dibawah Ini Dan Pastekan Tepat Diatas Kode Tersebut :

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

Kelima Kamu Ubah Sendiri Home ,About ,Contact Dan Lain - Lain lalu klik Save Atau Simpan !. :D

Nah Semoga Tutorial Membuat Menu Top .Diatas Bermanfaat Dan Jika ada yang error bisa koment dibawah.. :)

Share this :