Membuat buku tamu sembunyi

Shoutmix (buku tamu) memang menjadi widget yang biasa nya sering ada di blog-blog pribadi. Fungsi dari buku tamu itu sendiri memang tidak boleh kita remeh kan. Dari buku tamu itulah kita tau siapa saja yang sudah mampir ke blog kita. Dan juga untuk sekedar say hallo antara blogger dan pembaca postingan. Tetapi akhir-akhir ini dengan berkembangnya banyak sekali widget kadang membuat blog kita telalu penuh dengan ini itu. Sehingga space kita semakin kecil untuk meletakkan buku tamu.

Ada beberapa kawan-kawan kita yang kemudian berinisiatif bagaimana kalau buku tamu mereka disembunyikan saja. Tapi bukan disembunyikan untuk tidak ketahuan. Tetapi disembunyikan untuk memberikan space lebih untuk kebutuhan lain. Lagi pula yang dimaksud disembunyikan disini bukan berarti benar-benar sembunyi sehingga pengunjug kita tidak mengetahui kalau kita punya buku tamu.

Pengunjung sewaktu-waktu masih bisa meninggalkan pesan. Ketika di butuhkan maka kita hanya tinggal menekan button yang sedikit muncul dihalaman template kita. Sehingga buku tamu kita akan muncul kembali dan pengunjung pun bisa meninggalkan pesan untuk kita.

Lets Cekidot....

Cara nya gampang ko,

•  Login ke halaman Blogger.

• Masuk ke halaman rancangan, lalu elemen halaman, pilih Tambah gadget, lalu pilih HTML/Javascript

• Masukkan kode ini :

<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/
    AAAAAAAAAXQ/HshHClEVcvY/tabs.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">

    <!-- CHATBOX -->
    <center><!-- BEGIN TAGBOARD - http://www.tag-world.com-->
    <table border="0" cellpadding="0" cellspacing="0" summary="tag-world tagboard" width="180" height="360" align="center">
    <tr>
    <td align="center" height="262" ><IFRAME frameborder="0" width="99%" height="262" name="tagboard" src="http://www.tag-world.com/tag.php?id=47055" marginheight="2" marginwidth="2" scrolling="yes" allowtransparency="yes" style="border: 1px solid #C0C0C0; "></IFRAME></td>
    </tr>
    <tr>
    <td align="center" height="98"><IFRAME frameborder="0" width="99%" height="98" name="tagform" src="http://www.tag-world.com/form.php?id=47055" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" style="border: 1px solid #C0C0C0; border-top: 0px;"></IFRAME></td>
    </tr>
    </table>
    <!-- END TAGBOARD --></center>

    <br/>
    Membuat Hidden Shoutbox<br/>
    Click <a href="http://http://gellaps.blogspot.com/2009/11/membuat-hidden-shoutbox.html"><blink>disini</blink>
    </a>
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>

• Lalu save, dan perhatikan perubahan yang terjadi....

Semoga bermanfaat....

Catatan : ganti kode yang berwarna merah dengan kode Shoutmix kamu....