Membuat Buku Tamu Melayang/Tersembunyi

Ini adalah tutorial untuk membuat buku tamu yang tersembunyi di samping blog.

Langsung aja kali ya. Pertama, login ke Blogger > Design > Page Elements. Add gadget, pilih HTML/Javascript. Lalu masukkan kode berikut ini:


<br /> <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/AVvXsEhIzhKLfyHEgwpYGcAwjNL6fxy_YaSeLXbAk33N0mgd9RhzVBYMWWpbV7uVLO1XQ8-GLAAZit2hNgYUChnaT95LhX-eR399ue0yy0DvSP9ezo0TySt4W0ofLoEzDDkjb7BargaV-r7PRdI/s1600-r/gbook.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><br /> <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><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br />
KODE CBOX/SHOUTMIX
<div style="text-align:right"><a href="javascript:showHideGB()"><br /> [close]<br /> </a><br /> </div></div></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Keterangan:

• Yang diberi warna biru adalah url gambar tab "BUKU TAMU" yang bisa diganti dengan gambar lainnya. Sedikit tips kalau kamu membuat sendiri gambarnya. Setelah selesai dibuat, upload aja gambarnya ke Blogger, dengan cara Add Gadget > Picture. Setelah itu klik kanan gambar dan copy image url. Lalu CANCEL karena kita nggak mau menyimpan gambarnya. Jangan khawatir, url gambar ini akan terus valid karena sudah terupload ke Blogger.
• Yang diberi warna merah adalah kode Chatbox kamu.

Semoga nggak terlalu 'basi' karena tutorial ini sudah cukup umum dan banyak tersebar di berbagai blog. Kode-kode ini sudah lama bersarang dalam file Notepad di komputerku, jadi aku mempostingnya disini biar sekalian aku nggak susah kalo harus nyarinya lagi.

Semoga bermanfaat.