Cara Membuat Menu Bar Tanpa Edit HTML

1. Buka Blogger

2. Klik Tata Letak => Tambahkan Gadget => HTML/JavaScript

3. Lalu Copy 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=" #">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</a></li>
<li><a href="#">NAMA MENU</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>

4. Selesai

• Tweet
• Share
• Share
• Share
• Share