Membuat Menu Static dengan CSS pada Web/Blog

Pada tips dan trik kali ini saya akan membagikan sedikit ilmu mengenai script HTML tentang cara pembuatan menu static pada web/blog Anda. Pada dasarnya menu static atau yang lebih dikenal dengan menu melayang merupakan sebuah layout/tampilan objek yang menetap. Objek tersebut tidak akan berpindah ketika kita menggeser scroll baik secara vertikal maupun horizontal pada web/blog. Tanpa adanya campur tangan JavaScript dan hanya menggunakan CSS saja, maka menu static sederhana ini sudah dapat merias penampilan web/blog Anda lebih berkesan.

Tanpa basa-basi, langsung saja kita praktekkan.
1. Login ke akun blogger Anda.
2. Setelah masuk kedalam dashboard blog Anda, pilih tab menu Tata Letak.
3. Kemudian klik Tambah Gadget,lalu pilih gadget HTML/JavaScript.
4. Copas script dibawah ini :

<style type="text/css">
#menu_static {
position: fixed;
top: 5px;
left:0;
}
</style>
<div id="menu_static">
  <table border="1">
<tr><td><a href="#">Menu 1</a></td></tr>
<tr><td><a href="#">Menu 2</a></td></tr>
<tr><td><a href="#">Menu 3</a></td></tr>
<tr><td><a href="#">Menu 4</a></td></tr>
  </table>
</div>

5. Klik tombol simpan. Dan menu static ini akan berada di atas kanan pada web/blog Anda.

Jika Anda ingin merubah posisi menu dibagian bawah, pada CSS ganti top menjadi bottom. Kalau dibagian kanan ganti left menjadi right. Set nilai angka sesuka Anda.
Semoga tips dan trik saya ini dapat bermanfaat bagi Anda :)

2 komentar untuk “Membuat Menu Static dengan CSS pada Web/Blog”

Liens mengatakan...

makasih tutornya mas, lsg tak pake ya

Hasbi Ilmamsyah mengatakan...

masama mbak,silahkan di pake :)

Posting Komentar