Memasang Menu Melayang

Kembali ingin berbagi tips dan tutorial. dan bermula dari permintaan Sob Jaka tentang menu yang melayang dikanan atau kiri. contohnya seperti ini :

Melayang Left

Ingin memasang seperti itu diblog kamu? ikuti langkah-langkah berikut ini :

Menu melayang disebelah Kanan :

- Login keBlogger.
- Pergi ke "Tata Letak" lalu ke "Edit HTML".
- Copy code dibawah ini dan letakkan diatas ]]></b:skin> :

.melayang_menu {
position: absolute;
top: 190px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #fff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius: 10px 0 0 10px;
}
.melayang_menu a:hover img {
position: relative;
top: 3px;
left: 2px;
}
.melayang_menu a { display: block; }

- Simpan template.

- Pergi ke "Elemen Halaman".
- Tambah Gadget dan pilih HTML/JavaScript.
- Copy paste code berikut :

<div class="melayang_menu">
<a href="http://www.NAMABLOG.blogspot.com" title="Home">
<img src="http://raezen.fileave.com/smileys/home-icon-thumb989048.jpg"/></a>
<a href="ymsgr:sendIM?rae_zen"><img border="0" width="30" src="http://opi.yahoo.com/online?u=rae_zen&amp;m=g&amp;t=19" / height="30" title="Chat With Admin" /></a>
<a href="http://www.facebook.com" title="Facebook">
<img src="http://raezen.fileave.com/smileys/facebook-icon1.jpg"/></a>
<a href="http://www.friendster.com" title="Friendster">
<img src="http://raezen.fileave.com/smileys/friendster_icon.jpg"/></a>
<a href="http://www.twitter.com" title="Twitter">
<img src="http://raezen.fileave.com/smileys/twitter-logo1.jpg"/></a>
<a href="javascript:scroll(0,0)" title="Scroll to top of this page">
<img src="http://raezen.fileave.com/smileys/back_to_top.jpg"/></a>
<a href="javascript:scroll(10000,10000)" title="Scroll to bottom of this page">
<img src="http://raezen.fileave.com/smileys/back_to_bottom.JPG"/></a>
</div>

- Simpan.

- Untuk pemasangan sebelah kanan tinggal kamu melakukan perubahan sedikit pada code pertama diatas :

- Ubah "left" menjadi "right".
- Ubah nilai -moz-border-radius: 10px 0 0 10px; menjadi -moz-border-radius: 0 10px 10px 0;.

- Jika ingin tampil transparant, ubah background: #ffffff; menjadi background: transparent;
- Untuk padding silahkan sesuaikan nilainya sendiri, atau jika tidak terlalu paham biarkan begitu saja.

* Pada code kedua silahkan ubah link berwarna merah dengan link kamu.
* Ganti juga ID YM dengan ID kamu.

* Silahkan rubah model YM 19 dengan model yang kamu inginkan, tersedia dari 1 - 24 model.

* Silahkan rubah link gambar agar lebih indah.
* Jika menginginkan posisi horizontal, silahkan hapus code ini pada code CSS diatas :

.melayang_menu a { display: block; }

salam wigas koplak