Membuat Menu Navigasi dan Kotak Pencarian

Setelah beberapa waktu belakangan ini saya terus coba mengeksplorasi diri saya untuk bisa menghasilkan sebuah template karya sendiri, akhirnya walaupun masih jauh dari kata sempurna Alhamdulillah Template 3 Coloum Minima yang saya beri title T_Migo ini berhasil juga saya buat tentunya dengan kekurangan disana sini.. (maklumlah Newbie…) he..he..he..

Naaah… pada postingan tutorial blog kali ini saya akan coba sharing mengenai Cara Membuat Menu Navigasi  dan Kotak Pencarian seperti pada blog saya ini

Demo Here

Mau tau caranya????
Mau??? (Kayak iklan aje…)
Ok… tanpa berbasa-basi lagi kita langsung baca langkah-langkahnya dibawah ini :
1. Log in di Blogger.com
2. Pilih Edit HTML, click Expand Widget Templates
3. Cari Kode ]]></b:skin>  (Gunakan fungsi (Ctrl+F) untuk memudahkan pencarian kode tersebut), kemudian copy kode di bawah ini letakkan sebelum kode ]]></b:skin>

#navmenu {
margin-left: 15px;
margin-right: 15px;
margin-top: 20px;
background: #222;
background:-moz-linear-gradient(top, #888, #000);
height: 35px;
}

#navkiri {
width: 697px;
float: left;
margin: 0;
padding: 0;
}

#navkanan {
width: 260px;
font-size: 11px;
float: right;
margin: 0px;
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}

#nav {
float:left;
width:697px;
margin: 0;
padding:5px;
}

#nav li {
margin-right:5px;
padding:0px;
float: left;
position: relative;
list-style: none;
}

/* main level link */
#nav a {
background:-moz-linear-gradient(top, #999, #222);
-moz-border-radius:16px;
font:13px trebuchet ms;
font-weight: normal;
color: #bbb;
text-decoration: none;
display: block;
padding:3px 15px;
margin: 0;
text-shadow: 0px 2px 2px #000;
}

#nav li:hover > a {
background:-moz-linear-gradient(top, #aaa, #222);
color:#ccc;
border:0px;
-moz-border-radius:16px;
-moz-box-shadow: 0 1px 1px #000;
text-shadow: 0px 0px 2px #ddd;
}

#srcform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}

#srckotak {
background:-moz-linear-gradient(top, #fff, #ddd);
width: 200px;
color: #000;
font-size: 12px;
font-family: Trebuchet MS;
font-weight: normal;
margin-top: 3px;
padding:1px 5px;
border: 1px solid #4f4f4f;
display: inline;
-moz-border-radius:12px;
}

#srctombol {
cursor:pointer;
background:-moz-linear-gradient(top, #fff, #ddd);
color: #000;
font-size: 10px;
font-family: Trebuchet MS;
margin: 0 0 0 0px;
padding:2px 1px;
font-weight: bold;
border: 1px solid #000;
-moz-border-radius:12px;
}

4. Langkah selanjutnya adalah cari kode seperti kode di bawah ini :

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    </b:section>
    </div>

5. Kemudian copy kode dibawah ini tepat dibawah kode diatas :

   <div id='navmenu'>
   <div id='navkiri'>
   <ul id='nav'>
   <li><a href='/'>Home</a></li>
   <li><a href='#'>Edit Link</a></li>
   <li><a href='#'>Edit Link</a></li>
   <li><a href='#'>Edit Link</a></li>
   <li><a href='#'>Edit Link</a></li>
   </ul>
   </div>
   <div id='navkanan'>
   <div id='search'>
   <form action='/search/' id='srcform' method='get' style='display: inline;'>
   <input gtbfieldid='1' id='srckotak' maxlength='240' name='q' onblur='if (this.value ==&quot;&quot;)           {this.value = &quot;Search...&quot;;}' onfocus='if (this.value ==&quot;Search...&quot;) {this.value =    &quot;&quot;}' type='text' value='Search...'/>
   <input id='srctombol' type='submit' value='GO'/>
   </form></div>
   </div>
   </div>
   <!--end nav-->

6. Kemudian Save Template.
7. Selesai...
Menu navigasi dan kotak pencarian yang sobat buat udah jadi, silakan lihat hasilnya... :)