Punya Kita

Memasang Buku Tamu pada blog cukup penting sebagai sarana untuk mengirim pesan singkat dengan pengguna blog yang lain. Buku Tamu tersebut berada di samping atau di sebelah artikel blog, jika di Klik akan terbuka tampilannya. 

Jika anda tertarik ingin menggunakannya, maka berikut ini langkah-langkah dalam pembuatan Buku Tamu :

 <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/AVvXsEh8_1oh_VsS2NbwB2x0vkBeE8AuCIXpJ4TJDWbfbjiM2_tyjw6YqH4pp_ZbTAxy-SyFfAZc6glrjUy4ynBnKRATlYo_w7iiR3cWVqNgOuzfk3D6Gs3ZDkbbKudsqwKlAYEbntGu0vlsM7pl/') 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">

    <script type="text/javascript">

    var gb = document.getElementById("gb");

    gb.style.right = (30-gb.offsetWidth).toString() + "px";

    </script></div>