Membuat Show - Hide Floating Menu

Ini aku kutip dari bloger kawan ... yah ternyata lumayan juga nih show hidenya ... Sepplah buat mempercantik blok kita... hhahaa .. tapi punyaku dah terlalu berat jadi yah kawan klo mw liat contohnya silahkan berkunjung ke blognya sahabat kita ini. Nah udah liat kan apa yang dimasksud ??? Nah sekarang aku kasih nih kutipan tutorial ini ...

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. Copy - Paste kode berikut ini kemudian masukin kedalam gadget 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 -->

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
agar tulisannya terlihat vertikal kemudian sertakan

untuk spasinya.

Oy jangan sampei lupa ganti tulisan 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 -->


Nah itu dia... mudah mudahan berguna deh. . . . klo salah yah maklum namnya juga belajar hehehe :D ...

credit : http://hitsuke.blogspot.com