Cara Membuat Menu Terus Berada Di Atas (Floating Menu)

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/AVvXsEirZ1_L0LrftkEwjA8vFp4UVWXAzl6_gP3t6tOJ3vWIQzzRv8pFlDjgmI7g6Z-TxRKqzgZvJ_NNKFJ7nwX1q1ywgiU26aQ6TpsjMEyVhLVpmiT2Ed8XT2bf4aRRDqpJ1wYRVm9wrzlhJc0/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.
 

Keterangan :

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 TABEL WARNA DAN KODE WARNA

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







sumber artikel didapat dari tab SEBELAH

  ===== SETIAP POSTINGAN AKAN SELALU SAYA SERTAI FOTO SEXY SEBAGAI REFRESH =====

^_^ >>> KREASI-MAZ-BROW.BLOGSPOT.COM <<< ^_^