Cara Memasang Buku Tamu Auto Show Hide Di Blog
Buku tamu ialah sebuah fitur yang dijadikan sebagai sarana berkomunikasi di sebuah blog. Bentuk dari buku tamu ini sesungguhnya sebuah chatbox, fungsinya semoga pengunjung dapat menyisipkan komentar, pertanyaan, ataupun sekedar menyapa.
Kali ini saya akan menciptakan buku tamu tersebut ditampilkan dengan fitur auto show hide di samping kiri atau kanan halaman blog. Artinya buku tamu tersebut akan muncul ketika kita menyorot Button text-nya dengan kursor mouse. Cara menyerupai ini menambah keunikan blog itu sendiri. Namun pertama-tama kita harus mempunyai widget chatbox terlebih dahulu. Untuk yang belum mempunyai widget chatbox Anda dapat membuatnya di bawah ini, pilih salah satu:
- Cara Memasang Widget Chatwing di Blog
- Cara Memasang ShoutBox Oggix di Blog
- Cara Memasang Cbox di Blog
- Cara Memasang ShoutBox Shoutmix di Blog
Ini ialah screenshoot buku tamu Endolita:
Tertarik untuk membuatnya? Bagaimana caranya?
Cara Memasang Buku Tamu Melayang di Blog:
- Login ke akun Blogger
- Pilih Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
- Copy paste script berikut ini:
- Tulisan berwarna Biru dapat diganti dengan script widget chatbox milik Anda
- Tulisan berwarna Merah dapat diganti dengan warna background widget yang Anda inginkan
- Tulisan berwarna Hijau dapat diganti dengan icon buku tamu yang Anda inginkan. Cari saja di Google.
- Setelah script widget Chatbox nya disispkan, Simpan Template
- Cek di halaman utama blog untuk memastikan widget buku tamu auto show hide nya sudah muncul.
<style type="text/css"> #gb{ position:fixed; top:20px; z-index:+1000; }* html #gb{position:relative;} .gbtab{ height:150px; width:50px; float:left; background:url('http://i880.photobucket.com/albums/ac8/tikulerz/8_zpsb3316fb3.png original') no-repeat; } .gbcontent { float:left; border:1px solid #000000; -moz-border-radius-bottomleft:5px; -webkit-border-radius-bottomleft:5px; -o-border-radius-bottomleft:5px; -khtml-border-radius-bottomleft:5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; background: #dddddd; url() no-repeat bottom; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0); gb.opened = !gb.opened; }function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);} }</script> <div id="gb"> <div class="gbtab" onmouseover="showHideGB()"> </div> <div class="gbcontent"> <center>Catatan:
SISIPKAN SCRIPT WIDGET CHATBOX ANDA DISINI
<br /> <div style="text-align:center"> <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://.blogspot.com"> widget! </a></span> </div> </center></div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (50-gb.offsetWidth).toString() + "px"; </script> </div>
