membuat menu melayang/floating ~ Two Ruk Info

TwoRukInfo - Pada posting kali ini saya akan membagikan tutorial tentang cara mempercantik blog anda dengan membuat menu melayang/floating. Menu melayang ini maksudnya adalah menu yang ketika halamannya di scroll tetap terlihat pada posisinya, tidak ikut tenggelam kebawah. Contohnya adalah menu pada blog ini (lihat diatas). Saya akan membuatnya dengan 2 style, yaitu style gelap(Hitam transparan) dan style terang(Putih transparan). Anda tinggal memilihnya sesuai tampilan blog anda. Caranya adalah sebagai berikut.

Membuat Menu Melayang di Blogspot

1. Login ke dashboard blog anda > pilih menu "Template".

2. Lalu "edit HTML", maka akan muncul editor yang berisi kode blog anda.

3. Letakkan kursor anda pada editor dan klik CTRL+F sehingga muncul kolom pencarian pada editor tersebut.

4. Cari kode <body>, lalu letakkan kode berikut dibawahnya :

<div class="float-menu-wrap">
<ul class="float-menu">
<li><a href="#url-menu-anda">Beranda</a></li>
<li><a href="#url-menu-anda">Tentang Saya</a></li>
<li><a href="#url-menu-anda">Kontak Saya</a></li>
</ul>
</div>

Keterangan Kode :
- Kode warna merah harus anda ganti dengan url menu anda, URL harus diawali denganhttp://, contoh url : http://www.syakirurohman.net
- Kode warna hijau disebut anchor text, Gantilah sesuai dengan nama halaman yang di tuju oleh URL.
- Anda juga bisa menambahkan menu lain dengan menambah baris baru, misal : <li><a href="#url">menu baru</a></li>, tepat datas kode </ul>

5. Setelah memasukkan kode tersebut, cari lagi kode */]]></b:skin>, lalu masukkan kode CSS dibawah ini tepat diatas kode */]]></b:skin>

Kode untuk Style gelap

.float-menu-wrap { padding: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; background: rgba(10,10,10,0.5); z-index: 9999; } ul.float-menu { display: block; position: relative; margin: 0; padding: 0; margin-left: 50px; margin-right: 50px; } .float-menu li { list-style: none; display: inline-block; margin: 0; position: relative; padding: 9px 0; font-size: 16px; } .float-menu li a { color: #ddd; padding: 15px; font-family: georgia; font-weight: 500; } .float-menu li a:hover { background: rgba(10,10,10,0.5); color: #fff; }

Kode untuk Style terang

.float-menu-wrap { padding: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; background: rgba(240,240,240,0.5); z-index: 9999;box-shadow:#ddd 1px 0 3px 0; } ul.float-menu { display: block; position: relative; margin: 0; padding: 0; margin-left: 50px; margin-right: 50px; } .float-menu li { list-style: none; display: inline-block; margin: 0; position: relative; padding: 9px 0; font-size: 16px; } .float-menu li a { color: #777; padding: 15px; font-family: georgia; font-weight: 500; } .float-menu li a:hover { background: rgba(240,240,240,0.5); color: #333; }