Buku Tamu dengan Efek Show Hide

   Biasanya ada yang menempatkan buku tamu pada sidebar dan footer,
namun ada juga yang menempatkan buku tamunya di sudut blog "menyembunyikan buku tamu dengan
efek slide". Kali ini kita akan membuat penempatan buku tamu dengan cara Show Hide.

Jika penasaran ikuti langkahnya berikut ini:
1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukan kode di bawah ini:


<br /><style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:2px solid #00ff00; -moz-box-shadow: -2px 2px 25px lime; background:#000 no-repeat center; -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 showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script><br /> <div id="at"><div class="attab" onclick="showHideAT()"></div><div class="atcontent"><div align="center"><div style="background:url();"><br /> <br /> <!-- <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Masukan Kode Cbox Anda di sini <br /> <br /> <br /> <br /> <br /> <br /> <br /> --<br /> ><br /> <br /> </div></div></div><br/><br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI7WM4ZeTTCcIGfNTSH7KHFkSylS3BQKRN-A_-i64mCE-EpigQI2ffkB0dlYkcdSeINOx_lyRX3rCx-45f19msUuaFAxOjBEihiRqjrbXCpknoRzpoma2ZXuKiqTFsIN1olOvlFLYTWoTB/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div></div><br /> <br /> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script><br /> <br /> <br /> <div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a><br /> </div>

Keterangan:
- Anda dapat mengedit kode diatas untuk tampilan dan penempatan buku tamu

4. Masukan kode CBOX anda pada kode diatas

5. Simpan gadjet dan lihat hasilnya