Membuat Buku Tamu Slide

Buku Tamu Slide adalah buku tamu yang tersisip dibagian sudut samping blog. Saat tombol menunya diklik, form pengisian buku tamu akan bergeser (slide) terbuka, dan pengunjung bisa langsung mengisi/memberikan kata pesannya. Bentuk buku tamu seperti ini, disamping terlihat menarik, juga simpel dan dapat menghemat tempat. Contohnya dapat dilihat pada bagian pojok kanan blog ini, Trik pembuatannya dengan cara mengkombinasikan antara "script ruang" dan sisipan "script buku tamu". Langkah sederhananya adalah: Pertama, anda harus terlebih dahulu membuat sisipan script buku tamu, seperti menggunakan cbox, shoutbox, atau shoutmix. Kedua, copy paste kode/HTML berikut ini ke dalam TataLetak-->Tambah Widget --> HTML/JavaScript blog anda. Setelah itu simpan, dan lihat hasilnya..Kereen pasti!!

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('http://sites.google.com/site/brugkembar/sc/bukutmbg.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"> MASUKKAN SCRIPT BUKU TAMU ANDA DI SINI <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div></div></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

ISKANDAR Z

Author & Editor

Silahkan berikan komentar anda pada kolom yang telah disediakan. Kami akan segera memberikan respon