Cara Membuat Menu Navigasi Halaman dan Kotak Pencarian di Atas Header Blog

Menu navigasi halaman pada blog / situs adalah salah satu elemen yang perlu diperhatikan, karena selain untuk mempercantik tampilan desain, pengunjung blog juga akan lebih cepat dalam menelusuri serta menemukan hal yang mereka ingin cari pada blog tersebut.

Ada bermacam-macam bentuk menu navigasi yang didalam sebuah blog, navigasi horizontal, navigasi vertikal dan lainnya. Namun pada artikel ini saya akan membahas tentang cara membuat menu navigasi halaman blog beserta kotak pencarian.

Navigasi Halaman dan Kotak Pencarian di Atas Header Blog
Jika anda ingin memasang menu navigasi halaman diatas judul blog anda, silahkan ikuti langkah berikut ini.

1. Masuk ke blogger
2. Klik template > Edit HTML
3. Cari (CNTRL+F) kode ]]></b:skin>
4. Copy kode berikut ini dan pastekan diatas ]]></b:skin>

/* CSS FOR SEARCH BAR STARTS */ 

 #search{width:330px; border:none;background:transparent;height:20px;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 3px 3px #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: #FF0000; 

 } 

5. Kemudian cari (CNTRL+F) kode <div id='header-wrapper'> 
6. Copy dan paste kode berikut ini diatas kode <div id='header-wrapper'>


<div class='shadowblockmenu'> 

 <ul> 
 <li><a href='http://ombaron.com/'>Home</a></li>
 <li><a href='http://www.ombaron.com/p/contact-us.html'>Contact</a></li> 
 <li><a href='http://www.ombaron.com/p/sitemap_20.html'>Sitemap</a></li> 
 <li><a href='http://www.ombaron.com/p/discl.html'>Disclaimer</a></li>
 <li><a href='http://www.ombaron.com/p/about.html'>About</a></li> 
  
 <li><div class='topsearch' style='float: right'> 
 <div class='clerfix' id='search'> 
   <form action='/search' id='search' method='get'> <input name='q' placeholder='Cari artikel disini...' size='45' type='text'/><input id='search-button' type='submit' value='Cari'/>
   </form> 
 </div> 
 </div> 
 <div style='clear:both;'/></li> 
 </ul> 
 </div>

Catatan:
- Ganti url yang berwarna biru dengan url blog anda, kemudian simpan template.
- Sesuaikan dengan lebar ukuran blog anda pada kode CSS, misalkan width: 980px; diganti menjadi width: 900px;

Demikian cara membuat menu navigasi halaman dan kotak pencarian diatas judul blog. Jika anda merasa kesulitan silahkan tinggal pertanyaan pada kolom komentar.
Load disqus comments

0 komentar