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> :
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; }
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&m=g&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>
<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&m=g&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 :
- 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;.
- 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.
* Jika menginginkan posisi horizontal, silahkan hapus code ini pada code CSS diatas :
Happy Blogging.
- 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.
assalamualaikum
berhasil lagi nih sob
thanks banget yah
alaikm salam sob...alhmdllh kalo berhasil lg sob...happy blogging
Makasih sob...
Ijin kopi di notepad sob...
Ternyata di notepad ga bisa, lgsg aku simpan di word aja... makasih sob...
Sob, kl buat menu yang di bawah itu gmn caranya???
sukses selalu sob
mantaps tipsnya
yang ini juga perlu dicoba untuk blog yang satu.
makasih banyak.
Wah triknya dapet dari mana nie mas...??
keren dah blognya.
bagus mas layak untuk dicoba
Gut inpo bro
langsung praktek
http://phonecompi.blogspot.com
Makasih....