Cara Menyembunyikan buku Tamu dengan Cara Rolling

Bagi sobat t'Net yang ingin memodifikasi buku tamu pada blog, silahkan ikuti Langkah-langkah berikut.

tetapi sebelumnya saya ingin menjelaskan tips dari rolling Buku Tamu  ini. Mungkin teman2 bingung dengan buku tamu saya. Mungkin teman2 bertanya, dimana buku Tamu blog ini?

teman2 dapat melihatnya dengan melakukan klik  pada BUKU TAMU yang ada di sidebar blog ini. Nah teman2 mungkin ingin segera memilikinya kan? tenang saya pasti akan memberikannya.

ok...anda hanya cukup kopikan kode di bawah ini:

Disini Kodenya..

    <!-- Mulai Rolling Widget -->
    <style type="text/css">
    #gb{
    position:fixed;
    top:10px; /*jarak dari atas*/
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:none;
    }
    .gbcontent{
    float:left;
    border:2px solid #888888; /*warna bingkai*/
    background:#F0F0F0; /*warna latar*/
    padding:5px 10px 0px 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">
    <div style="text-align:center;"><a href="javascript:showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png" /></a></div>

    Kode Shoutbox atau Buku Tamu


    <script type="text/javascript" src="http://enes-sc.googlecode.com/files/rollingwidget2.js"></script>
    </div></div>
    <!-- Selesai Rolling Widget -->

Ubahlah ukuran jarak dari atas, warna bingkai, warna latar, dan judul sesuai keinginan kamu.

Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.

Selanjutnya kamu lakukan salah satu langkah atau cara berikut:

Nah untuk menampilkannya silahkan ikuti Langkah berikut:

Cara Pertama

• Dari Dashboard akun blogger kamu, pilih Tata Letak - Elemen Halaman.
• Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
• Paste kode yang anda kopi tadi dan jangan diberi judul (title).
• Setelah itu save

Cara Kedua

• Dari Dashboard akun blogger kamu, pilih Tata Letak - Edit HTML.
• Cari kode </head> pada script HTML template blog kamu.
• Paste kode yang  tadi di bawah kode </head>.
• Simpan template

Setelah itu buatlah sebuah link yang menampilan buku tambu pada sidebar blog anda. Kodenya seperti berikut:

<a href="javascript:showHideGB()">Buku Tamu</a>

Kemudian Simpan.

Selesai deh..

Selamat mencoba yah....