Cara Membuat Tab Menu Atas Melayang Dengan Search Box Di Blog

Assalamualaikum wr.wb. Kali ini saya akan posting tentang Cara Membuat Tab Menu Atas Melayang Dengan Search Box Di Blog. Fungsi dari memasang widget ini sendiri adalah menambah ruang untuk kolom menu dan membuat search box kita tampil tambah modern.

Cara ini sendiri adalah penggabungan dari tab menu laman atas dari aeroaxel.blogspot.com dan menubar dari 1000arsip.blogspot.com lalu saya gabungkan dan menjadi seperti di bawah ini(live demo).Berkali-kali kegagalan mulai dari tidak sejajarnya kotak search dengan menu sampai pada ukuran tinggi dan panjang kotak tersebut sempat menjadi kendala .Beruntung,setelah bertanya di DBP akhirnya berhasil melakukan percobaan ini.lalu bagaimana caranya ? so check it out

 Live Demo

1.Buka blogger=>blog anda
2.pilih template=> edit html
3.cari kode ]]></b:skin>  (gunakan CTRL + F )
4.taruh kode css  dibawah ini diatas 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: #336699;
  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 25 untuk mengubah tinggi

dan ubah kode 280 dan 315 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/AVvXsEi0LLiIQg5vsXl8MFtTza67qXYHpGx7sGv30tr5gH_4uFWedMrxvVdWPAji43stnHzt1WB0edTw9CRAOzo0KfYY4mPaL4W8OAqVHM2hRNRnAfGgXnSKr8Qo9v2U_swM1LcflewVfwYU3NI/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='http://infomenarikdanbermanfaat.blogspot.com/'>MENU</a></li>
        <li><a href='http://infomenarikdanbermanfaat.blogspot.com/'>MENU</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='http://infomenarikdanbermanfaat.blogspot.com/'>MENU</a></li>
        <li><a href='http://infomenarikdanbermanfaat.blogspot.com/'>MENU</a></li>
      </ul>
<div id='menubar-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}' onfocus='if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel disini..'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJutCyCw3lD-PqDruHdxE3QGaH2gXR8eU4yOnzyeg6mrYki3_pGbq1-59ZII0XkQ_BuMWrXjiwyK4rKUamqZ9F63DLtp4-T03ezqwcgDcQcfjio0eP73Qfz_tuGgSXxUnDR-Fxk_Efug/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 http://infomenarikdanbermanfaat.blogspot.com/ dengan URL tujuan kamu,selanjutnya ubah MENU dengan judul menu yang anda inginkan

9.jika ingin agar hasil search dibuka pada laman yang sama anda tinggal menghapus kode target='_blank'

10.pratinjau,kalau sudah pas klik simpan


jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.