Cara Membuat Tab Menu Melayang dengan Spoiler

Berkunjung ke Blognya senior kita yang satu ini, saya lihat ada yang baru di pojok kiri atas, siapa lagi kalau bukan Beben Koben si Bloglang anu Ganteng Kalem tea ini, yang dibri judul "MENU FIXED" pada postingan yang berjudul "Make a Menu with Fixed Property" :r dan disini saya beri nama Spoiler Melayang untuk Tab Menu  :z 

Sedikit saya bahas apa kelebihan dari Spoiler ini dibandingkan Spoiler bertingkat yang pernah saya posting, Karena diperlukan tempat yang lebih sedikit tapi di dalamnya kaya isi, dan bisa ditampilkan dimana suka [kiri atas - bawah maupun kanan atas - bawah] cuma dengan mengganti text posisinya :# Demonya kawan bisa lihat » disini

Caranya membuatnya :

• Copas kode Css berikut dan taruh sebelum ]]></b:skin>

#bmenu{
position:fixed;
left:5px;
top:5px;
background-color:#236C95;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FF0;
background-color:#95CAFF;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#00F;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#F00;}

#bmenu:hover{
z-index:5;
height:175px;

Text warna merah adalah posisi tampilan, silahkan ganti text berwarna merah tersebut untuk memindahkan posisi tampilannya [misalnya kiri-atas, kanan-bawah dan lain sebagainya].
Text yang berwarna biru adalah untuk warna background luar dengan font warna Kuning  :@ dan begitu seterusnya  :# 

• Kalau sudah pas simpan template kawan 
• Pada Design / Perancang Template 
• Tambah Gadget baru dan Copas kode HTML berikut kedalamnya 

<div id="bmenu">
<h3>TAB MENU MELAYANG</h3>

<ul><li><a href="http://tips-blogbego.blogspot.com/p/siapa-saya.html" title="adalah Profil saya" target="_blank">SIAPA SAYA</a></li>

<li><a href="http://tips-blogbego.blogspot.com/p/kontak-kami.html" title="untuk menghubungi saya" target="_blank">KONTAK KAMI</a></li>

<li><a href="http://www.facebook.com/?ref=home/" target="_blank" title="Facebook Putu Blogbego">FACEBOOK</a></li>

<li><a href="http://info-blogbego.blogspot.com/" target="_blank" title="info blog dan komputer berbahasa inggris">BLOG & COMPUTING INFO</a></li>

<li><a href="http://www.alambali.co.cc/" target="_blank" title="informasi wisata di Bali berbahasa Inggris">ALAM BALI.CO.CC</a></li>

<li><a href="http://melajah-di.blogspot.com/" target="_blank" title="informasi Bali : Budaya, sejarah dll">MELAJAH DI</a></li>

<li><a href="http://blog-bego.blogspot.com/" target="_blank" title="Blog untuk Demo">BLOGBEGO</a></li>

</ul></div>

Silahkan ganti URL saya dengan URL kawan, dan kalau semuanya sudah pas jangan lupa simpan Template kawan dan lihat hasilnya :O