Cara Memasang Buku Tamu Auto Show Hide di Blog

Buku tamu adalah sebuah fitur yang dijadikan sebagai sarana berkomunikasi di sebuah blog. Bentuk dari buku tamu ini sebenarnya sebuah chatbox, fungsinya agar pengunjung bisa menyisipkan komentar, pertanyaan, ataupun sekedar menyapa.

 

Kali ini saya akan membuat buku tamu tersebut ditampilkan dengan fitur auto show hide di samping kiri atau kanan halaman blog. Artinya buku tamu tersebut akan muncul saat kita menyorot Button text-nya dengan kursor mouse. Cara seperti ini menambah keunikan blog itu sendiri. Namun pertama-tama kita harus mempunyai widget chatbox terlebih dahulu. Untuk yang belum memiliki widget chatbox Anda bisa 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 adalah screenshoot buku tamu Endolita:

Tertarik untuk membuatnya? Bagaimana caranya?

Cara Memasang Buku Tamu Melayang di Blog:

1. Login ke akun Blogger
2. Pilih Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
3. Copy paste script berikut ini:

<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>

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://endolita.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>

Catatan:

• Tulisan berwarna Biru bisa diganti dengan script widget chatbox milik Anda
• Tulisan berwarna Merah bisa diganti dengan warna background widget yang Anda inginkan
• Tulisan berwarna Hijau bisa diganti dengan icon buku tamu yang Anda inginkan. Cari saja di Google.
4. Setelah script widget Chatbox nya disispkan, Simpan Template
5. Cek di halaman utama blog untuk memastikan widget buku tamu auto show hide nya sudah muncul.

Itulah sekilas pengetahuan saya tentang Cara Memasang Buku Tamu Auto Show Hide di Blog. Semoga bermanfaat. Jika mencari artikel lain yang serupa silahkan cek di abwah ini: