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.
Cara Membuat Menu Terus Berada Di Atas
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

Cara Membuat Menu Terus Berada Di Atas (Floating Menu)
2. Klik Tambah Gadget / Add A Gadget
Membuat Menu Terus Berada Di Atas
3. Pilih Gadget Html/JavaScript
Cara Membuat Floating Menu
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

2 comments:

  1. nongol lagi nih gan,,,,thnks ya udah mau ngasi tau cara untuk buat menu nya itu,,,salam persahabatan selalu ya

    ReplyDelete
  2. Ini yang aku cari, udah pusing nyarinya kemana2 tau nya disini
    Ok sob Trims cara nya udah di share

    ReplyDelete