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/AVvXsEgE46YWi3LmZ5sPZdDqTZ7HdBVxnYv6n8t6iSuC7_XJ3HOMO8zzLuHh6Y2MlxdPIvmUpTlc8p-B_cZdV81jxKh7ODJTziqsGWBawrqdD1t7AeNRzYkUGWcNh1xDlTtY3R9V-zXq6cMUvPE/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.

Tentang Penulis

SISWONO. Adalah Operator Sekolah di Kecamatan Kroya. Semua tulisan disini berdasarkan pengalaman pribadi dan juga sharing dari blog lain. Maaf jika ada Kesalahan Dalam Menulis Artikel Mohon Di Maklumi.
Follow aku di Twitter, Facebook atau di Halaman FB

Posted in: SCRIPT