} -->

22

Minggu, 24 Juli 2011

Membuat Menu Horizontal dengan Kotak pencarian

wah sob bagi anda yang ingin membuat menu mungkin ini cocok buat anda
pada tutorial kali ini saya akan membahas tentang cara membuat menu horizontal dengan
search engine nih screnshot nya

navigasi horizontal blue and black plus search box

gimana apa anda berminat membuat nya jika anda berminat, silahkan anda simak,
cara ini begitu simpel dan sangat mudah karena hanya menggunakan kode CSS

nah untuk caranya 

log in ke blog anda
klik rancangan / layout
klik tambah gadget
klik html / javascript

lalu anda masukan kode di bawah ini


<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="
#">Home</a></li>
<li><a href="
#">About</a></li>
<li><a href="
#">Contact</a></li>
<li><a href="
#">Galery</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>





anda gannti kode warna biru dengan Link nya
dan berwarna merah dengan judul Link nya



dikutip dari http://sin1aja.blogspot.com/2011/01/membuat-menu-horizontal-dengan-search.html

2 komentar:

  1. cara yang sederhana, tidak perlu ketelitian, hasilnya memuaskan, makasih friend.

    BalasHapus
  2. mantab gan, ane jadi kebantu!

    BalasHapus