Membuat "Floating Menu" menggunakan CSS

Floating menu maksudnya adalah menu yang melayang atau yang menempel pada layar browser kita. Selain membantu Anda tertarik??? Ayo kita coba secara langsung ^^...

Login ke Blogger

Lalu klik Rancangan >> Edit HTML, tidak perlu mencentang kotak Expand Template Widget

Cari kode <body> atau </body>. Salin kode dibawah ini dan taruh dibawah <body> atau sebelum </body>:

<style>
div.floating-menu {position:fixed;background: #BCD0ED;border: 1px solid #4C77B6; width:150px; z-index:100; top: 50; left: 0; right: ; bottom: ;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class='floating-menu'>
<h3>Contoh Floating Menu</h3>
<a href='http://asal-suka.blogspot.com/'>Home</a>
<a href='http://asal-suka.blogspot.com/search/label/Game'>Game Browser</a>
<a href='http://asal-suka.blogspot.com/search/label/Tips-Trick%20Blogging%20di%20Blogger'>Tips-Trick Blogspot</a>
</div>
Contohnya adalah gambar yang ada di atas kiri.


Anda dapat mengubah sesuai kebutuhan Anda mulai dari:
warna merah : background color untuk Floating menu tersebut
warna biru : warna border/garis kota pada floating menu

width: lebar kotak Floating menu.
height: otomatis menyesuaikan
untuk posisi silahkan Anda atur sesuai keinginan Anda...^^

Selamat mencoba..
Terima kasih sudah berkunjung..
Happy Blogging ^^...
Label: ,