Kode CSS JQuery Transparent Floating Menu
<style type="text/css"> #floatMenu { position:absolute; overflow:auto; top:180px; left:55%; margin-left:240px; width:200px; height:300px; border:4px solid #B87F4B;border-right:none; background:url(http://s3.tinypic.com/335e5xx/gubhugreyot/images/bgBoxMenu.jpg) no-repeat; border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; padding:10px 4px; opacity:0.1; -moz-opacity:0.1; filter:alpha(opacity=10); } #floatMenu:hover { opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100); } #floatMenu ul { margin-bottom:20px; } #floatMenu ul li { line-height:14px; list-style:none; display:block; text-decoration:none; color:#ccc; } #floatMenu ul li a{ font-family:Arial Narrow; margin-left:0px; padding-left:15px; font-size:12px; color:#fff; background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat; background-position:0 3px; text-decoration:none; } #floatMenu ul li a:hover{ color:#38DB29; background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat; background-position:0 3px; } #floatMenu ul li a:visited{ color:#F80000; } </style> Javascript JQuery Transparent Floating Menu
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:800,queue:false});
});});
</script>
xHTML JQuery Transparent Floating Menu
<div id="floatMenu"> <ul class="menu1"> k-18" title="Image Menu">Floating Image Menu</a></li> <li><a href="Link-19" title="Image Gallery">Javascript Image Gallery</a></li> <li><a href="Link-20" title="JQuery">JQuery Image Gallery</a></li> </ul> </div>
Langkah Pembuatan jQuery Transparent Floating Menu
- Login to BloGGeR (login ke BloGGeR) : Gunakan dan Tulis User Name (Nama Pengguna) atau Email Address serta Password (Sandi/Kode Rahasia).
- Dasboard (Dasbor) : Sesaat setelah login maka kita akan melihat halaman Dasbor. KLIK link Layout/Tata Letak atau Design/Rancangan.
- Layout/Tata Letak (Design/Rancangan) : KLIK Add Gadget (Tambah Gadget).
- HTML/Javascript : KLIK pada teks atau gambar yang bertuliskan HTML/Javascript.
- Copy-Paste : Copy dan Paste Seluruh kode CSS, Javascript dan xHTMl di box yang tersedia.
- SAVE (Simpan) : KLIK SAVE/Simpan, kemudian buka blog (open your blog) untuk melihat hasilnya.
Keterangan/Catatan :
- Apabila blog telah ada (menggunakan jQuery-1.3.2.js atau jQuery-1.3.2.min.js, maka <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> tidak usah disertakan.
- Letakkan seluruh kode secara berurutan dari Kode CSS diikuti Javascript, kemudian baru xHTML.
- Ganti Link-1 s/d Link-20 dengan URL (alamat) setiap menu yang akan ditampilkan.
Contoh : http://gubhugreyot.blogspot.com/2010/07/cara-buat-dan-pasang-ticker-2-kolom.html - GAnti Nama Menu dengan menu milik sampeyan sendiri :
Contoh Nama Menu yang harus di ganti : CSS Floating Menu - Apabila dikehendaki merubah nilai transparansi menu, silahkan ubah nilai opacity pada syntax
#floatMenu { .... .... opacity: 0.1;-moz-opacity:0.1;filter:alpha(opacity=10); ... dst .... } - Akan lebih baik lagi jika jQuery dan javascript diletakkan (simpan) di atas kode <head>, sedang kode CSS di atas kode ]]></b:skin>. Jika penyimpanan dilakukan seperti langkah tersebut, silahkan hilangkan tag pembuka dan penutup "style" pasda kode CSS yang berupa :
<style type="text/css"> dan </style> - xHTML tetap dalam posisi seperti sebelumnya dengan disimpan melalui penambahan widget di bagian sidebar.
- Hal seperti di atas berlaku juga saat template blogger baru (new blogger template) digunakan.
Bagi yang menggunakan template blogger baru, silahkan ganti kode CSS-nya dengan kode CSS berikut ini:
<style type="text/css">#floatMenu {
position:absolute;
overflow:auto;
top:-100px;
right:-30px;
margin-left:240px;
width:200px;
height:300px;
border:4px solid #B87F4B;border-right:none;
background:url(http://s3.tinypic.com/335e5xx/gubhugreyot/images/bgBoxMenu.jpg) no-repeat;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
padding:10px 4px;
opacity:0.1;
-moz-opacity:0.1;
filter:alpha(opacity=10);
}
#floatMenu:hover {
opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li {
line-height:14px;
list-style:none;
display:block;
text-decoration:none;
color:#ccc;
}
#floatMenu ul li a{
font-family:Arial Narrow;
margin-left:-10px;
padding-left:20px;
font-size:12px;
color:#fff;
background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
background-position:0 3px;
text-decoration:none;
}
#floatMenu ul li a:hover{
color:#38DB29;
background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
background-position:0 3px;
}
#floatMenu ul li a:visited{
color:#F80000;
}
</style>
Keterangan tambahan
- Untuk mengatur posisi floating menu terhadap bagian atas (vertical position), rubah nilai pada top: -100px; dengan memperbesar atau memperkecil. Semakin besar nilai minus, maka akan semakin naik.
- Untuk mengatur posisi terhadap batas sebelah kanan (horizontal position), rubah nilai pada : right: -30px; Semakin besar nilai minus, maka akan semakin ke kanan.
0 komentar:
Posting Komentar