Cara Membuat Script Buku Tamu Show Hide

Alhamdulillah...secara tidak sengaja waktu jalan-jalan menyusuri mbah google. Saya menemukan info yang sangat bagus dari blog tetangga sebelah (mrmung.com). Info kali ini yang saya dapat hanyalah cara membuat Script Buku Tamu yang keren. Karena menggunakan model Show Hiden yang tidak akan memakan tempat sidebar blog sobat. Mungkin sedikit mengulas kegunaan Script Buku Tamu ini. Memasang sebuah buku tamu (shoutbox/guestbook) pada sebuah blog adalah hal yang cukup lumayan penting, karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang pemilik blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang sobat buat. Dimana yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi yang bisa berupa pujian, pertanyaan, sekedar iseng atau ada juga kritikan terhadap isi blog sobat dan justru dengan adanya variasi itulah membuat blog kita jadi lebih baik lagi seiringnya waktu.

Widget Script Buku Tamu ini akan menempel di sebelah kanan blog sobat dan hanya terlihat tombol atau tulisan Buku Tamu saja. Bahkan bisa sobat atur sendiri  tempat letak yang sobat inginkan, dengan mengatur atau merubah height, width dan float yang sobat inginkan. Untuk memasang Script Buku tamu ini cukup sederhana sekali. Sobat hanya perlu copas script yang terdapat dibawah post ini dan kemudian letakkan pada Gadget HTML/JavaScript. Sobat juga dapat meletakakn di HTML/JavaScript yang sudah ada di blog sobat. Langsung saja ke TKP...

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7NOR33VG1ohQ4xlLoThKwP_CaUJv-fLayY0d1Rue3kGKiBhYbWXXL5LTEdSpcYXQkUWW5rthDwJU8IGYlSAafBtsD0ijo2WaPl6LC94cfdh3U02Q0CWOiv2rbH1qDHQCseAXsQlK2hPPJ/') 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"> <!-- Start http://shoutbox.widget.me HTML Code --> <iframe title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=SHARE3VERYTHING" width="200" height="300" frameborder="0" scrolling="auto"></iframe> <br /><a href="http://shoutbox.widget.me" title="Get your own free chat widget!">Shoutbox widget</a><br /> <!-- End http://shoutbox.widget.me HTML Code --> <br/> <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>

Tara...Script Buku Tamu sobat sudah terpampang disamping sidebar sobat. Semoga informasi ini bermanfaat bagi sobat. Selamat mencoba