Cara Membuat Show Hide Floating Menu

OK, Bloggers … Mau bikin buku tamu yang bisa "tampil dan sembunyi" ? Ikuti langkah-langkahnya berikut ini : 

1. Nah yang pertama login dulu ke blogger (ke akunnya masing-masing ya? mau jadi hacker?)
   
2. Pilih Layout >> Page Element >> Add a Gadget >> Html/Javascript (terserah teman-teman mau ditaruh di mana)
   
3. Copy kode di bawah kemudian paste ke dalam 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: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> <span id="preserve59c10c64b08b4d3aae61573d4fbc8bff" class="wlWriterPreserve"><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></span> <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> <span id="preserve1853fd6cdab94a269e68d2f0aeeedab3" class="wlWriterPreserve"><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script></span> <!-- 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..^_^

selanjutnya coba liat di bagian .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 dihilangin 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 

Sumber : http://hitsute.blogspot.com/