Memasang Menu Melayang

Diposkan oleh Hery Prasetyo Sunday, December 27, 2009
بسم الله الرحمن الرحيم

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

Melayang Left

menu melayang

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://sites.google.com/site/hapiamesir/javascript/Home_32.png"/></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://sites.google.com/site/hapiamesir/javascript/facebook_32.png"/></a>
<a href="javascript:scroll(0,0)" title="Scroll to top of this page">
<img src="http://sites.google.com/site/hapiamesir/javascript/Up-arrow-32.png"/></a>
<a href="javascript:scroll(10000,10000)" title="Scroll to bottom of this page">
<img src="http://sites.google.com/site/hapiamesir/javascript/Down-arrow-32.png"/></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; }


Happy Blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

13 Responses to Memasang Menu Melayang

  1. Jaka Utama Says:
  2. assalamualaikum
    berhasil lagi nih sob
    thanks banget yah

     
  3. HAPIA Mesir Says:
  4. alaikm salam sob...alhmdllh kalo berhasil lg sob...happy blogging

     
  5. Rock Says:
  6. Makasih sob...

     
  7. LL Says:
  8. Ijin kopi di notepad sob...

     
  9. Rock Says:
  10. Ternyata di notepad ga bisa, lgsg aku simpan di word aja... makasih sob...

     
  11. Rock Says:
  12. Sob, kl buat menu yang di bawah itu gmn caranya???

     
  13. heryanto Says:
  14. sukses selalu sob

    mantaps tipsnya

     
  15. yang ini juga perlu dicoba untuk blog yang satu.
    makasih banyak.

     
  16. Good Trik Says:
  17. Wah triknya dapet dari mana nie mas...??

     
  18. keren dah blognya.

     
  19. bagus mas layak untuk dicoba

     
  20. Gut inpo bro
    langsung praktek
    http://phonecompi.blogspot.com

     
  21. Makasih....

     

Post a Comment