Cara Membuat Tab Menu Melayang Dengan Search Box Di Atas Header

1. Login ke blogger
2. Klik Template >> Edit HTML
3. Cari kode ]]></b:skin> (gunakan CTRL+F)
4. Taruh kode css dibawah ini di tepat atas kode ]]></b:skin>

.bilah-menu-atas {

width: 100%;

min-width: 960px;

position: fixed;

top: 0px;

left: 0px;

right: 0px;

  height: 27px;

font-size: 13px;

z-index: 99;

white-space: nowrap;

background-color: #B20000;

background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);

box-shadow: 0px 2px 0px rgb(14, 90, 140);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.kolom-utama {

-moz-transition: all 0.2s linear 0s;

width: 960px;

height: auto;

margin: 0px auto;

}

.kolom-menu {

width: 521px;

height: auto;

margin: 0px 0px 0px -41px;

float: left;

  display: inline;

}

.kolom-menu ul {

height: auto;

margin-top: 0px;

}

.kolom-menu ul li {

float: left;

position: relative;

list-style: none outside none;

}

.kolom-menu ul li:first-child {

border-left: 1px solid rgba(30, 30, 30, 0.125);

}

.kolom-menu ul li a {

color: #ffffff;

font-weight: bold;

text-shadow: -1px -1px rgba(0, 0, 0, 0.2);

text-decoration: none;

  display: inline-block;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 5px;

padding-left: 10px;

position: relative;

border-right: 1px solid rgba(30, 30, 30, 0.125);

box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);

}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {

background-color: rgba(255, 255, 255, 0.125);

}

#search{

border:1px solid #F0512D;

height:25px;

width:315px;

background:#f6f4f4;

}

#search input{

color:#777;

border:none;

}

#s-m{

font-size:15px;

width:180px;

padding-left:4px;

padding-top:5px;

margin:0;

}

#search-t #search{

background-color:#FFFFFF;

border:1px solid #336699;

border-radius:4px 4px 4px 4px;

-moz-border-radius:4px 4px 4px 4px;

-khtml-border-radius:4px 4px 4px 4px;

-webkit-border-radius:4px 4px 4px 4px;

}

#search-t #s-m{

width:280px;

padding-top:3px;

}

5. Sesuaikan lebar dari kotak search dengan mengubah kode warna biru untuk mengubah tinggi, dan kode warna ungu untuk mengubah lebar search box.

6. Cari kode </head> (CTRL+F)

7. Lalu pastekan kode ini di bawah kode </head>

<div class='bilah-menu-atas' id='bilahmenuatas'>

<div class='kolom-utama'>

    <div class='kolom-menu'>

      <ul>



         <li><a href='http://infomenarikdanbermanfaat.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHicJYlmjO9xITq32rUQ0g1SOGwEip_woEHAPVlxqyOI1Ou8P16FRICAxfBI94B6x1gbjNlbi1aS1BhBm3_ky_eJGFvzvtOjEnOugoU2TyvHb7Xchp262NoORpsJ0nWTDh6NiuFPkF78M/s800/Beranda.png' width='20px'/></a></li>

        <li><a href='#'>MENU</a></li>

        <li><a href='#'>MENU</a></li>

      </ul>

    </div>

    <div class='kolom-menu'>

      <ul style='float: right'>

        <li><a href='#'>MENU</a></li>

        <li><a href='#'>MENU</a></li>

      </ul>

<div id='menubar-right'>

<div id='search-t'>

<div id='search'>

<form action='/search' method='search'>

<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel disini..";}' onfocus='if (this.value == "Cari artikel disini..") {this.value = ""}' type='text' value='Cari artikel disini..'/>

<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOMPLZq_lGnWblKwLv9MY8-0iPpiJdaoKIOw9JvgABSJNOgsIL-fKWUuEox2w3duqjGG5A_rBjGjC2unaUecyL5R9T3eo5kQJE0FOGaKgy4rq2gOnXSWBbRM9z5TBjC-M9DVjlLZfWCaE/s200/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>

</form>

</div>

</div>

</div>

    </div>

</div>

</div>