cara membuat menu horizontal dengan search box

hari ini sekedar share tentang cara membuat menu horizontal dengan search box dan pemasangannya tanpa ribet cukup di pastekan pada gadget sobat tanpa mengedit template

Untuk melihat demonya sobat klik tombol di bawah ini

LIHAT DEMONYA

Bagaimana apa sobat tertarik dengan menu ini?

Mari kita lanjutkan saja tutorial ini selengkapnya :

1.    Login  ke blogger

2.    Pilih tab >Design

3.    Add Gadget pada bagian bawah header template sobat

4.    Pilih HTML/JavaScript lalu pastekan kode di bawah ini

<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;Cari apa bro..&quot;) {this.value = &quot;&quot;}" type="text" value="Cari apa bro.." /> <input class="button" id="searchsubmit" name="Click" type="submit" value="Click" /></form></div></div>

5.    Simpan gadget sobat dan lihat hasilnya

Selesai sudah tutorial Cara Membuat Menu Horizontal Dengan Search Box, selamat mencoba, semoga berhasil dan bermanfaat

Anda Baru saja membaca artikel tentang cara membuat menu horizontal dengan search box dan anda bisa menemukan artikel cara membuat menu horizontal dengan search box ini dengan url http://ghilankmayones.blogspot.com/2012/06/hari-ini-sekedar-share-tentang-cara.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel cara membuat menu horizontal dengan search box ini bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link cara membuat menu horizontal dengan search box sumbernya.

Artikel Lain Yang Mungkin Anda Cari: