Cara Praktis Membuat Navbar Horizontal Dengan Search Engine

Untuk membuat navbar horizontal ada berbagai macam cara, anda dapat mencari kode kode untuk membuat navbar pada artikel para blogger senior kita di Google, namun sangat disayangkan banyak script cara membuat navbar horizontal yang tidak semuanya cocok diterapkan pada template kita, maklum sebagai blogger junior saya kurang memahami fungsi dan arti kode kode HTML pada template.

Berikut ini saya akan memberikan script cara praktis membuat navbar horizontal dengan search engine yang tampil pada pinggir kanan dari navbar, dikatakan praktis karena kita hanya mencopy kode kedalam gadget tanpa harus mengedit HTML template, cara praktis ini didapatkan dari blog tetangga yang dengan baik hati membagi ilmunya untuk kemajuan blogger Indonesia.

Cara yang harus dilakukan:
1. Login ke account blogger anda
2. Pilih tata letak/layout
3. Tambahkan gadget lalu pilih HTML/ javascript
4. Copy kode dibawah ini pada gadget anda.

<style type="text/css">

.black{
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 ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo 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; }

#searchboxo 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'>
<ul><li><a href="http://haraublog.blogspot.com">Beranda</a></li>
<li><a href="#">Tips n Trik</a></li>
<li><a href="#">Serba Serbi</a></li>
<li><a href="#">Kontak Admin</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='insert keyword here...'/><input class='submitbutton' type='submit' value='search'/></form></div></div>

Ganti kata kata yang berwarna merah dengan kata kata pada navbar anda.
Ganti kata kata yang biru dengan alamat url link tujuan anda.