Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat jQuery Transparent Floating Menu

Jquery Transparent floating Menu ini sudah di coba di template BlogSPOT dan hasilnya teramat memuaskan. Jika sampeyan ingin melihatnya silahkan KLIK link DEMO di bawah ini.



Pada prinsipnya, jQuery Transparent Floating Menu bekerja mengandalkan JQuery-1.3.2.js. JQuery ini digunakan dengan pertimbangan kemampuannya yang luar biasa sehingga pemanfaatannya tidak hanya dapat dipergunakan untuk sebuah fungsi (desain) tunggal saja. Seandainya sampeyan sebelumnya sudah menggunakan jQuery-1.3.2.js atau JQuery-1.3.2min.js, maka hanya tinggal menambahkan sedikit kode CSS dan javascript saja.

Floating menu dibuat dalam bentuk transparan sehingga beberapa teks yang nantinya tertindih oleh oleh pergerakan floating menu akan tetap akan terlihat dengan baik. Penggunaan efek opacity sama sekali tidak mengganggu atau bahkan merusak penampilannya karena kita menambahkan juga efek opacity pada hover sehingga ketika cursor menyentuh salah satu titik box menu, maka seluruh bagian Transparent Floating Menu akan terlihat dengan amat sempurna. Untuk semakin memperindah bentuk dan penampilan, kita juga menambahkan sebuah background image serta background arrow (panah) pada link menu serta efek rounded corners di sebelah kiri box. Pada bagian sebelah kanan yang bersinggungan di garis tepi blog kita buat tanpa border sehingga terlihat seakan melekat ujung kanan blog.

Cara Membuat JQuery Transparent Floating Menu

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">
<li><a href="Link-1" title="Javascript Menu">Javascript Floating Menu Javascript Floating</a></li>
<li><a href="Link-2" title="CSS Menu">CSS Floating Menu</a></li>
<li><a href="Link-3" title="Image Menu">Floating Image Menu</a></li>
<li><a href="Link-4" title="Image Gallery">Javascript Image Gallery</a></li>
<li><a href="Link-5" title="JQuery">JQuery Image Gallery</a></li>
<li><a href="Link-6" title="Javascript Menu">Javascript Floating Menu</a></li>
<li><a href="Link-7" title="CSS Menu">CSS Floating Menu</a></li>
<li><a href="Link-8" title="Image Menu">Floating Image Menu</a></li>
<li><a href="Link-9" title="Image Gallery">Javascript Image Gallery</a></li>
<li><a href="Link-10" title="JQuery">JQuery Image Gallery</a></li>
<li><a href="Link-11" title="Javascript Menu">Javascript Floating Menu</a></li>
<li><a href="Link-12" title="CSS Menu">CSS Floating Menu</a></li>
<li><a href="Link-13" title="Image Menu">Floating Image Menu</a></li>
<li><a href="Link-14" title="Image Gallery">Javascript Image Gallery</a></li>
<li><a href="Link-15" title="JQuery">JQuery Image Gallery</a></li>
<li><a href="Link-16" title="Javascript Menu">Javascript Floating Menu</a></li>
<li><a href="Link-17" title="CSS Menu">CSS Floating Menu</a></li>
<li><a href="Link-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.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

4 komentar:

  1. wah... aku sih udah muncul... tapi dia kok sembunyi?? pas aku scroll dikit,muncul eh.. sembunyi lagi...
    tolong ya...
    catatan-si-tito.blogspot.com

    BalasHapus
  2. Buat seluruh sobat blogger, GR mengucapkan banyak terima kasih atas segenap perhatian yang telah diberikan, baik melalui kunjungan ataupun komentar dan pertanyaan. Semoga apa yang terpostingkan selalu memberi manfaat serta semakin meningkatkan spirit untuk terus berkarya . GR bukanlah seorang yang tak pernah luput dari segala kekurangan, oleh karena itu segala kritik dan saran akan sangat bermanfaat untuk terus meningkatkan kualitas posting. Juga beberapa pertanyaan belum sempat terjawab, banyak kunjungan balasan juga belum sempat aku lakukan, sekali lagi mohon beribu maaf.

    Atas persoalan yang berkaitan dengan jQuery Transparent Floating Menu di BloGGER baru, GR sudah tambahkan kode CSS untuk New BloGGeR Template. Silahkan di buka postingnya dan lakukan perubahan supaya dapat berfungsi baik. Bagi sobat blogger yang ingin menyampaikan sesuatu hal melalui email, silahkan sampaikan melalui :

    cilikgundul@gmail.com

    Jika jawaban tak bisa diberikan secara langsung, maka akan di sampaikan dalam bentuk posting. Juga perlu GR sampaikan bahwa nggak setiap hari GR selalu membuka email, oleh karena itu mungkin ada jawaban terlambat mohon di maafkan.

    Sekali lagi GR juga mengucapkan "Selamat Menunaikan Ibadah Puasa, semoga hikmah dan hikmat puasa akan semakin mencerahkan dan mendekatkan hati kita sekalian kepada Sang Khalik.

    Salam ...

    Gubhug Reyot

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

 
GR | Edited by | gubhug reyot