Cara Membuat Menu Terus Berada Di Atas (Floating Menu)

Beberapa hari yang lalu ada yang bertanya bagaimana cara membuat menu horizontal yang selalu berada di atas seperti yang ada di blog ini.

Sebenarnya cara membuat menu horizontal yang terus berada di atas tersebut tidak terlalu sulit, namun terkadang menu tersebut tidak sesuai dengan template yang kita gunakan, karena struktur template nya yang berbeda, tapi karena salah satu pengunjung blog ini minta buat kan tutorial nya akhirnya saya putuskan untuk menuliskan cara membuat menu yang selalu berada di atas.

Cara Membuat Menu Terus Berada Di Atas

Langkah pertama yang harus dilakukan sudah pasti kita harus masuk dahulu ke dasbor blogger, kemudian:

1. Klik Tata Letak

2. Klik Tambah Gadget / Add A Gadget

3. Pilih Gadget Html/JavaScript

4. Masukkan kode berikut di dalamnya

<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#eee; color:#666; font-size:11px; line-height:30px; border-bottom:1px solid #ECEDE8;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#333; color:#fff; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #ddd; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#fff; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#999; line-height:12px; border:1px solid #ECEDE8; }
#search input:focus { background:#fff; border:1px solid #ddd; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHG7UT-3A4SL-wJbtaqBHxKpHDW8qGez92W3kYShp8S_gJ3m5MDpPwK7loFB7SLFCxVXO26cxsKE3J-zX_HoOwzECG0YpbEN-sZdl-gpRExI31ttklnMEMc-TgXPiJ_zN7ol5Y4JOHLok/s1600/iconsearchr.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>   
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
<li><a href='#'>Edit Menu Ini</a></li>
</ul>               
</div>
<div class='clear'/>
</div>

5. Simpan & Selesai.
Keretangan

Silakan ganti tanda pagar (#) dengan link / url halaman yang kamu mau.
Dan gantu tulisan Edit Menu Ini dengan nama menu yang kamu mau.

Bagaimana cara mengganti warna latar menu tersebut? 

Pada kode di atas ada kode #top {background:#eee;

Silakan ganti kode #eee dengan kode warna yang kamu mau, untuk menemukan kode warna silakan lihat di Daftar Kode Html Warna.


Nah itulah tutorial cara membuat menu horizontal yang selalu berada di atas yang bisa saya tuliskan. Selamat mencoba dan semoga bermanfaat.


Oh ia, jangan lupa baca juga Cara Membuat Menu Serta Sub Menu Tanpa jQuery