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


Cara Membuat Navigasi Menu Plus Kotak Pencarian  Cara Membuat Top Menu Plus Kotak Pencarian di Atas Header


TIPS desain ini lanjutan tips sebelumnya wacana navigasi sajian di atas header blog. Kali ini ada plusnya, yaitu navbar sajian plus kotak pencarian. Contohnya menyerupai topmenu di atas blog CB ini.

1. Blogger Dashboard >> Template >> Edit HTML
2. Copas aba-aba berikut ini di atas aba-aba  ]]></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 aba-aba berikut ini di atas aba-aba <div id='header-wrapper'>

Catatan: kalau tidak ada aba-aba tersebut, cari aba-aba <body>, <body .... > atau 
<div class='fauxborder-left header-fauxborder-left'> 
 <div class='fauxborder-right header-fauxborder-right'/> dan Copas aba-aba berikut ini di atas-nya.


<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 aba-aba tersebut di atas aba-aba ini:

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



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

4. Save Template!

Sudah.... beres.... segitu doang kok cara menciptakan top sajian plus kotak pencarian di atas header.

Good luck and happy blogging!

Sumber
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours