R-C Blog'S: Cara Membuat Tab Menu Melayang Dengan Search Box Di Atas Blog

Walaupun di tempat saya cuaca lagi kurang bagus, tapi saya akan tetap semangat untuk berbagi kepada sobat R-C Blog'S. Pada kali ini saya akan berbagi cara membuat tab menu melayang dengan search box di atas blog, seperti di blog saya. Cara membuat tab menu melayang dengan search box di atas blog ini saya dapatkan dari salah satu blog teman saya yaitu info menarik dan bermanfaat. Langsung aja deh buat anda yang mau memasangnya di blog kalian bisa ikuti langkah-langkah di bawah ini.

Cara Membuat Tab Menu Melayang Dengan Search Box Di Atas Blog:

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/AVvXsEjf5jTJX6qNaXmM59tqr89kygIN-DeZkFGd1ENOZF9f7FWBMYPr_p6JsB9E-0AjJIOXWq5l1l8IXtT0-5NWhs2LM9kdmrtinS-IC9DQ_M33vsBE1HgaxB1riWimyWL7jS48kPdmWM-GKTI/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/AVvXsEgmwiNmcfueFqDGwSvjWx6d54qcd2-M2rWLynKN3BG87FvIr6fKlSQrrAt2n3niiD40yry9Snt734Jqq6FWtVlT1nGiMTvYab7f2aTgwjPeoLX8rJqdKtr3B9RhgMjt23XPtkSekYDZ294/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>

8. Ubah # dengan url tujuan sobat, selanjutnya ubah MENU dengan judul menu yang sobat inginkan
9. Klik Simpan Template, selesai deh tinggal lihat hasilnya....