Menu Horizontal Tanpa Edit HTML

by Error Shinobi

Mau buat Menu Horizontal seperti gambar di atas ???,

Langsung aja ikuti cara di bawah ini...

login ke blog anda, terus Tata Letak lalu pilih Element Lama kemudian Tambah Gadget lalu pilih HTML/java script dan selanjutnya anda copy – paste kode dibawah 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>

Catatan:
yang perlu Anda ganti hanya tulisan yang berwana biru.

---***** Semoga Bermanfaat *****---

8 komentar:

TituitBom.Com mengatakan...

wah, sangat gampang ternyata ya sob.. thanks infonya..

Shinobi Blog mengatakan...

@TituitBom.Com : ada juga sih cara yg sulit, tp buat apa cara yg sulit kalo ada yg simple... :) .. masama sob. . .

Radar Bulukumba mengatakan...

makasi ya,,,,,

Shinobi Blog mengatakan...

@Radar Bulukumba : Sama-Sama .. :)

Shodiq mengatakan...

thank you gan

Shinobi Blog mengatakan...

@Shodiq : sama-sama gan.. :)

Rendy Rizaldy mengatakan...

ternyata gampang juga ya psang menu.Thank's infonya gan.
visitback+comment2 ya.Nice

Arijal Azmi mengatakan...

wahh,, trimakasih bnyak ya info nya
sangat membantu..
:)

Posting Komentar