Cara buat Search Box Horizontal

Saya mau bagiin cara untuk membuat menu horizontal tapi uniknya udah ada search box pake javascript lagi udah simple tapi keren. Mau ??? Gini caranya : Login >> Tata Letak >> Tambah Gadget >> HTML/Javascript >> Copy dulu codenya 

<style type="text/css">  
.black_horizontal{  
float:left; margin-bottom:10px;  
padding:0px; width: 100%;  
overflow: hidden; background: #499bea;  
background: -moz-linear-gradient(top, #999 0%, #000 100%);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );  
-moz-box-shadow: 1px 1px 10px #888;  
-webkit-box-shadow:1px 1px 10px #888;  
-webkit-border-radius: 6px;  
-moz-border-radius: 6px;  
border-radius: 6px;}  
.black_horizontal ul{  
margin: 0; padding: 0; padding-left: 10px;  
font: bold 14px Verdana;  
list-style-type: none; }  
.black_horizontal li{  
display: inline; margin: 0;}  
.black_horizontal li a{  
float: left; text-decoration: none;  
margin: 0; padding:12px; color: white;}  
.black_horizontal li a:visited{color: white; }  
.black_horizontal li a:hover, .black_horizontal li.selected a{background:#000000;  
text-decoration:underline;  
}  
#cari_apa{  
width:250px; float:right; padding: 4px; margin:0px; }  
#cari_apa form input.searchinput{  
background: #fff; padding:6px; margin:0px; width: 160px;  
border: solid 1px #999; outline: none;  
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  
-moz-box-shadow: inset 0 1px 3px #666;  
-webkit-box-shadow: inset 0 1px 3px #666;  
box-shadow: inset 0 1px 3px #aaa; }  
#cari_apa form input.submitbutton{  
cursor:pointer; width: 60px;  
background: #FCFCFC;  
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );  
border:1px solid #d8d8d8;  
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  
color:#000; padding:4px; text-shadow:1px 1px #fff;}  
</style>  
<div class='black_horizontal'>  
<ul><li><a href="#">Home</a></li>  
<li><a href="#">Tutorial</a></li>  
<li><a href="#">Contact</a></li>  
<li><a href="#">About</a></li>  
</ul>  
<div id="cari_apa"><form action="/search" id="searchform" method="get" style="display: inline;"><input id="s" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari apa bro..&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;}" type="text" value="Search" /> <input class="button" id="searchsubmit" name="Click" type="submit" value="Click" /></form></div></div>  

(Yang berwarna kuning ganti dengan link, yang berwarna gamti dengan nama)  
>> Paste

Gampang kan??? Jangan lupa like atau folow di twitter ya

Sumber : ariradjasblogs.blogspot.com