Memasang Menu Navigasi plus Search Box

Kemudahan navigasi pada suatu blog adalah hal esensial yang harus dan kudu ada pada suatu blog. Menu navigasi sudah mutlak harus ada, tidak kalah pentingnya menu search box juga harus disediakan (baca pentingnya memasang search box disini). Berhubung kedua menu navigasi ini sangat penting maka agar lebih atraktif pada tutorial kali ini akan membahas tentang cara memasang menu navigasi yang disertai search box, selain lebih atrktif tentunya juga akan lebih menghemat space, right?

Menu Navigasi plus Search Box

Step by Step

1. Sign in ke Blogger.
2. Pada Dashboard pilih blog yang akan di oprek.
3. Pilih Opsi Template » Edit HTML
4. Cari kode </header>
5. Paste kode berikut di bawah kode </header>
<div class="wc-navsearch"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">Contact us</a></li> <li><form id="searchbox" action="/search" method="get"> <input class='top-search-input' name='q' size='20' type='text' value='Search here.....' onfocus="if(this.value == 'Search here.....') {this.value=''}" onblur="if(this.value == ''){this.value ='Search here.....'}" /> <input class='search-submit' type='submit' value='Search' /> </form></li> </ul> </div>  
6. Sekarang cari kode ]]></b:skin>
7. Pastekan kode berikut di atas kode ]]></b:skin>
.wc-navsearch{
width: 100%;
font-family: verdana;
font-size: 14px;
text-decoration: none;
}

.wc-navsearch ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #222222;
border-radius:10px;
}

.wc-navsearch ul li{
display: inline;
}

.wc-navsearch ul li a{
float: left;
color: #FFFFFF;
padding: 10px ;
text-decoration: none;
border-right:1px solid #444444;
}

.wc-navsearch ul li a:visited{
color: #FFFFFF;
}

.wc-navsearch ul li a:hover{
color: #FFFFFF ;
border-radius:10px;
background:#725463;
}

#searchbox
{
margin-top:7px;
}

.top-search-input
{
width:140px;
margin-left:20px;
border:1px solid #ffffff;
border-radius:10px;
font:14px verdana;
padding:2px;
color:#777777;
background:#ffffff;
}
.search-submit
{
background:#725463;
border:1px solid #725463;
font:14px verdana;
color:#ffffff;
padding:2px;
border-radius:10px;
}
8. Simpan Perubahan

Tips & Warnings

Pemasangan widget di bawah kode </head> mungkin tidak berjalan lancar pada semua template, oleh karena itu untuk posisi pemasangan bisa disesuaikan menurut selera masing-masing, gunakan insting liar Anda :D