Auto Hide Buku Tamu

Buku tamu merupakan tempat untuk menaruh pesan singkat di blog anda ketika sedang ada yang berkunjung.  
Maksud dari judul Auto Hide bukan lah buku tamu yang tidak bisa dilihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah artikel blog yang akan terbuka jika ada yang klik gambar buku tamu tersebut.
Langkah ini merupakan salah satu langkah dalam menghemat tempat di blog kita.Buku tamu juga dapat menaikan trafic blog. Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix. Setelah anda memiliki kode buku tamu tersebut, lanjut ke langkah berikut:

 

1. Login di blogger dengan ID anda
2. Klik menu Tata letak
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Lalu Copy kode berikut dan Pastekan Pada kotak HTML

 

<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/AVvXsEjN31d-B_ziNUJrRI-iQYKdkaC06t-m3EP3eagsw__-q1qns4y2OxJfG_VospiGGT3NOmdWqbhSQpC_lvnnfBYUD1KeQ0m_JCeG20WHQFAIKFWb1THU9fI0c4QLudzUPuRCOWUZ8Z5RQtX4/') 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">

 

 

 < Letakkan disini kode Shoutbox / buku tamu Anda>

    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div>

Ganti tulisan < Letakkan disini kode Shoutbox Anda> dengan kode script buku tamu anda.

6. Klik simpan.

Jika langkah tersebut sudah anda lakukan, anda dapat melihat hasilnya pada blog anda masing-masing

 
 

Posted in: BLOGGER,MULTIMEDIA