Menyembunyikan kotak komentar khusus (buku tamu) di samping layar browser

Cara untuk menampilkan sedikit gadget pada blog adalah bukan dengan sedikit menggunakan gadget blog tetapi anda bisa saja menyembunyikan gadget pada bagian tertentu, misalnya kotak komentar khusus atau buku tamu yang bisa anda lihat contohnya dengan klik disini dan coba anda klik gambar yang ada tulisan buku tamu.

Jika anda tertarik, ikuti langkah-langkah berikut ini.

1.        Pastikan anda sudah mendapatkan kode gadget kotak komentar khususnya.

Jika anda belum mendapatkannya, silakan anda klik link dibawah ini

Cara daftar di ShoutMix dan mengamblil kode gadget kotak komentar khusus (buku tamu)

2.        Pastikan anda sudah login ke blogger, jika belum maka klik saja disini.

3.        Pilih rancangan pada blog yang anda inginkan

4.        Sekarang kita menuju “elemen laman”

5.        Klik salah satu “tambah gadget” dimanapun yang anda suka

6.        Setelah itu akan muncul beberapa pilihan gadget, tetapi yang harus anda pilih adalah HTML/JavaScript

7.        Letakkan kode gadget dibawah ini kedalam gadget yang anda pilih pada langkah 6

<style type="text/css">

    #gb{

    position:fixed;

    top:120px;

    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">

letakkan kode gadget kotak komentar khusus yang anda dapatkan dibagian ini

    <div style="text-align: right;">

    <a href="javascript:showHideGB()">

    [Tutup Buku Tamunya...]

    </a></div>

    </div>

    <script type="text/javascript">

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

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

    </script></div>

Keterangan :

Tulisan yang berwarna merah itu harus anda ganti dengan kode gadget kotak komentar khusus yang telah anda dapatkan.

8.        Simpan dan lihat hasilnya.