Buku Tamu Show/Hide dari Atas II

Cara membuatnya :
1. Login blogger
2. Rancangan, Tambah Gadget,  Html/Java Script
3. Dan Simpan kode berikut :

<style type="text/css"> #gb{ position:fixed; right:450px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .gbcontent{ float:left; border:2px solid #0F0; background:#ffffff; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style><br /> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <div id="gb"><br /> <div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br /> <!-- Script Chatbox nya disini --><br /> <br /> <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a><br /> <br /> </center></div></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.top = (-400-gb.offsetWidth).toString() + "px"; </script></div><br /> <a class="west" href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUkjCljLSAS4E39IHly0hGl6Td2RwbOQLUSu7Iuv_SYHzaFPouI8JPmrFG9hQVtDWzRI4VPctJUcyQg_blxUHdMnmCFzqKxCTnPkInzW46Mr-xYIxvYN_CKUIGT-r6HNGtV9BHMmuGmA4/s1600/Guestbook.png" border="0" /></a>

4. Simpan dan lihat hasilnya
5. Jika kawan-kawan ingin Tab Image Guestbooknya melayang disamping Blog gunakan Script yang ini:

<style type="text/css"> #gb{ position:fixed; right:450px; z-index:+1000; } #tabGb { position:fixed;_position:relative;top:50px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); } * html #gb{position:relative;} .gbcontent{ float:left; border:2px solid #4173af; background:#ffffff; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; } </style><br /> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script><br /> <div id="gb"><br /> <br /> <div class="gbcontent"><br /> <!-- Script Chatbox nya disini --><br /> <br /> <br /> <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a><br /> <br /> </center></div></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.top = (-400-gb.offsetWidth).toString() + "px"; </script><br /> <br /> <div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3jfvzFQm0Yuju3KYhowAxuWzUJRU_5xrVq0uCD_YNHHNkNu9qp3fAZa9B8LAy2MGqO-e2srgNTjMFYUzzZ4WBflv5adg2feZSFA4yNDXrigDAjw1NLWJgtO9FJF7TB7Pd8Nj_gV3yzk/s1600/Guestbook.png" border="0" /></a></div></div>