Membuat Show - Hide Floating Menu

Membuat Show - Hide Floating Menu
Wah gak q sangka sebelumnya, ternyata show - hide floating guest book ini keren juga. Awalnya sih q gak mau mempostingin yang ginian, tapi karena sobat blogger kita banyak yang bilang keren and ada juga yang request pengen yang seperti ini juga, ya udah akhirnya q mulai nulis postingan ini deh. Ok dhe ladies and gentlements kita mulai langsung aja tutorialnya, simak dan perhatikan baik-baik ya ^_^

Contoh Gambar

Live Demo

1. Seperti biasa langkah yang pertama adalah Login dulu k blogger
2. Pilih Layout kemudian pada page element pilih Add Gadget (Sebenarnya gak mesti tambah gadget baru sih. Bisa juga di selipin di Gadget yg sudah terpasang.)
3. Pilih yang HTML / Javascript
4. Copy - Paste kode berikut ini kemudian masukin kedalam gadget (HTML / JavaScript)  tadi

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:200px; width:50px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest2.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"><div class="hitsukeFXtab" onclick="showHidehitsukeFX()"><center><b><span style="color:white;"><br /> G<br /> u<br /> e<br /> s<br /> t <br /> <br /> <br /> B<br /> o<br /> o<br /> k </span><span style="font-size:130%;color:white;"></span></b></center></div><div class="hitsukeFXcontent"><!-- Taruh Kode Shoutmix Kamu disini --> <br /> Mw Guest Book yg Seperti ini..??<br /> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"><a href="javascript:showHidehitsukeFX()"> [close] </a> </div></div></div><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->

 5. Temukan kode  berikut (byar gampang nyarinya: tekan CTRL + F)

<!-- Taruh Kode Shoutmix Kamu disini -->

kemudian ganti dengan kode shoutmix / menu apa ajalah yang berbentuk HTML.

6. Jangan lupa Di SAVE

Keterangan
Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^
selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini
border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.
background:#ffffff; klo kode ini buat warna latar belakang / backgroundnya ganti kode warna #ffffff sesuai keinginanmu.
kemudian
Keterangan

Coba perhatikan code diatas di bagian * html #hitsukeFX{position:relative;}
kan ada code height untuk tinggi gambar dan width untuk lebar gambar, nah kode itu harus disesuaikan dengan ukuran gambar backround nya kalau misalnya kamu mo ganti OK..^_^
selajutnya coba liat di bagain .hitsukeFXcontent{
kan ada kode seperti ini
border:2px solid #d9e3ff; nah kode yang ini buat border / garis pinggirnya ganti kode warna #d9e3ff sesuai keinginanmu.

background:#ffffff; klo kode ini buat warna latar belakang / backgroundnya ganti kode warna #ffffff sesuai keinginanmu.
kemudian coba perhatikan baik-baik kode <br/>G<br/>u<br/>e<br/>s<br/>t <br/><br/><br/>B<br/>o<br/>o<br/>k
jika di hilangin kode html na akan terbaca GUEST BOOK. klo mo ganti tulisannya sertakan kode <br/> agar tulisannya terlihat vertikal kemudian sertakan <br/><br/> untuk spasinya.
Oy jangan sampei lupa ganti tulisan <!-- Taruh Kode Shoutmix Kamu disini --> dengan kode shoutmix kamu


Nah kode diatas untuk buku tamu yang bisa diganti-ganti tulisannya. Klo kamu mau yang langsung berbentuk gambar juga ada kox. Nieh dia code nya
Pink TAB

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:30px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:108px; width:37px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/GuestPink.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d241c7; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"><div class="hitsukeFXtab" onclick="showHidehitsukeFX()"></div><div class="hitsukeFXcontent"><!-- Taruh Kode Shoutmix Kamu disini --> <br /> Mw Guest Book yg Seperti ini..??<br /> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"><a href="javascript:showHidehitsukeFX()"> [close] </a> </div></div></div><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->

Black TAB

<!-- Begin Show Hide Floating - http://www.hitsuke.blogspot.com --> <style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:125px; width:40px; float:left; cursor:pointer; background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #d9e3ff; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"><div class="hitsukeFXtab" onclick="showHidehitsukeFX()"></div><div class="hitsukeFXcontent"><!-- Kode Shoutmix mu Disini --> <br /> Mw Guest Book yg Seperti ini..??<br /> Klik di <a href="http://hitsuke.blogspot.com/2009/08/membuat-show-hide-floating-menu.html"> Membuat Show Hide floating Guest Book </a> <div style="text-align:right"><a href="javascript:showHidehitsukeFX()"> [close] </a> </div></div></div><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script> <!-- End Show Hide Floating - http://www.hitsuke.blogspot.com -->

Bagi pengguna wordpress ato yang lainnya sepertinya bisa deh tinggal Copy - Paste aja, gw kurang yakin karena gw gak pernah make yang lain selain blogger. tapi coba aja deh...!!
Sekian dulu ya smoga bermanfaat.
Good Luck..!!!
________________________________________________________________


Note 1 : MOHON JANGAN DI GANTI LINK Q YANG ADA SANA YA SOBAT..!!!

Note 2 : Sebenarnya nggak mesti shoutmix ato guest book yang diletakkan disana, smua kode yang berbentuk html bisa kox di letakkan disana. Misalnya kamu mau melatakkan Navigation Menu, Floating Taskbar, Blog list, flash navigation menu, ato bahkan blog kamu juga bisa di buat melayang disana. Pokoknya terserah kamu deh yang penting tetap semangat, kreative, and terus berkarya OK..!!! ^_^