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 == "") {this.value = "Cari apa bro..";}" onfocus="if (this.value == "Search") {this.value = ""}" 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
1 komentar:
assalamualaikum....thanks infonya, tp dah penuh blog ane bang. ikut ngopy y.hehe ...sxn tukar link bang, link dah terpasang bs di cek di http://satriabajahikam.blogspot.com
ditunggu knjungan baliknya
Posting Komentar