Cara Membuat Buku Tamu Show dan Hide Dari Atas

Lihatlah Widget buku tamu Pada Blog Sigli-Cyber ini,,itu Merupakan Buku tamu yang Show Dam Hide (terbitkan dan sembunyikan) dari atas ke bawah.
Silahkan Lihat DEMO nya di samping Layar sobat.

Jadi,Pada kesempatan ini,Saya akan membahas bagaimana Cara Membuat Buku Tamu Show dan Hide Dari Atas seperti Yang saya terapkan di Blog Sigli-Cyber ini.
Bagi Yang berminat.,silahkan ikuti langkah-langkah dibawah ini:



1. Login Ke Akun Blog Sobat
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten.

<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 #33e104; background:url(http://i846.photobucket.com/albums/ab26/arifins/fire.gif)#000000 repeat-x bottom center scroll; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; padding:10px; -moz-box-shadow: 0px 2px 5px 0px #f8f9b9; } </style> <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> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:#000;">  <!-- Simpan Kode cbox atau shoutmix nya disini -->   </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div> <span ><a href=http://sigli-cyber.blogspot.com/2012/10/cara-membuat-buku-tamu-show-dan-hide.html"><div style="color: rgb(68, 68, 68);"> <span style="font-size:xx-small;">Get This Gadget</span></div></a></span> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <a href="javascript:showHideAT()"/><img border="0" src="http://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png" alt="Fivers" title="Klik untuk membuka Buku Tamu" style="display:scroll;position: fixed; bottom:350px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ; /></a> </div>

7.Simpan

NB:

• Ganti texs berwarna merah dengan kode buku tamu Sobat.
• Ganti juga teks warna biru dengan gambar yg Sobat inginkan
• Text warna Putih merupakan position dari gambar yang kita inginkan

Selamat Mencoba