Blog Apa Aja
Sumber Artikel Gue

Jangan Lupa Mampir Y

Blog Apa Aja

FaceBook n Twitter
Add n Follow Me, Join Group


Facebook :
Join Group In Facebook
Add Me As Friend

Twitter :
Follow Me


Hope U Like This Feature


Dengan Fitur Di Atas, Semoga Sobat Bisa Lebih Dekat dengan Blog Apa Aja

NOT Your Language..? Translate It..!!!

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Cara Membuat jQuery Transparent Floating Menu

Rabu, 16 November 2011

Jadilah Yang Pertama Men-shared Artikel Ini Ke Teman-Teman yang Lain..
www.tips-fb.com Buzz It Twitter submit button

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
  1. Login to BloGGeR (login ke BloGGeR) : Gunakan dan Tulis User Name (Nama Pengguna) atau Email Address serta Password (Sandi/Kode Rahasia).
  2. Dasboard (Dasbor) : Sesaat setelah login maka kita akan melihat halaman Dasbor. KLIK link Layout/Tata Letak atau Design/Rancangan.
  3. Layout/Tata Letak (Design/Rancangan) : KLIK Add Gadget (Tambah Gadget).
  4. HTML/Javascript : KLIK pada teks atau gambar yang bertuliskan HTML/Javascript.
  5. Copy-Paste : Copy dan Paste Seluruh kode CSS, Javascript dan xHTMl di box yang tersedia.
  6. SAVE (Simpan) : KLIK SAVE/Simpan, kemudian buka blog (open your blog) untuk melihat hasilnya.
Keterangan/Catatan :
  1. 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.
  2. Letakkan seluruh kode secara berurutan dari Kode CSS diikuti Javascript, kemudian baru xHTML.
  3. 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
  4. GAnti Nama Menu dengan menu milik sampeyan sendiri :

    Contoh Nama Menu yang harus di ganti : CSS Floating Menu
  5. 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        ....        }
  6. 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>
  7. xHTML tetap dalam posisi seperti sebelumnya dengan disimpan melalui penambahan widget di bagian sidebar.
  8. 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
  1. 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.
  2. Untuk mengatur posisi terhadap batas sebelah kanan (horizontal position), rubah nilai pada : right: -30px; Semakin besar nilai minus, maka akan semakin ke kanan.

 

 


Sharing Itu Indah
Jika Sobat Suka Dengan Artikel Ini, Jangan Lupa Sharing Ke Teman yang Lain y
^_^y

Yuk Sebarkan Artikel ini ke Temen-Temen yang Laen
Share |
Agar Teman-Teman Anda Mendapat Manfaat Dari Artikel Ini, jangan lupa SHARE di FACEBOOK lewat tombol di bawah ini.
www.tips-fb.comKlik Di Sini Untuk Share Lewat Facebook
Twitter submit buttonKlik Di Sini Untuk Share Lewat Twitter


Masukkan Email Anda Untuk Berlangganan Artikel Terbaru "Evolusi Apa Aja".. GRATIS !!!

>>>
Setelah Daftar, Jangan Lupa Cek EMAIL !!
Anda Akan Dikirimkan Pesan Verifikasi untuk Berlangganan Artikel GRATIS


Seluruh Artikel