Cara Membuat CBox Tersembunyi di Blog

alohaaa~ saya kembali membawa tutorial buat para blogger.
kali ini cara membuat CBox tersembunyi di blog. (Kaya 'Buku Tamu' di blog ku) hehehe
tapi kali ini aku ngga bikin sendiri. cuma reshare aja.
semoga bermanfaat ^^

Tau chat box yang ada di home page blognya reggy kan? ituloh kotak merah di sebelah kanan kalau di klik keluar chat box? nah itulah yang akan kita bahas kali ini. Tapi sebelum membuat cboxnya tersembunyi ikuti dulu langkah - langkahnya disini. Jika sudah, ikuti langkah - langkah berikut:

1. Login pada blog anda

2. Rancangan

3. Tambah Gadget

4. HTML/Javascript

5. Copy kode di bawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd08nFMYzmNMOW5hc06WRx_jd1OhrhJbFKnwu_TSYJZi0uEPzrEXVMXQnXYxcmDFt1ggBMWH-3PtW1g7KarR0wcw26Wfq_oKzAyd6yQRCTbGrAGK0Eon1MjPrns0yhPGHN0VFJH8jHYHfZ/') 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">
    
   -------Kode Cbox / Shoutmix / Lainnya---------
    
    </div>
    </div>
    
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

6. Simpan dengan tampa judul

Selesai Deh...

Ket:

• Ganti Tulisan yang berwarna merah dengan kode Cbox anda
• Anda juga bisa menggunakan kode Shoutmix pada tutor ini

NB: KARENA BLOGKU NGGA BISA DI COPAST, UNTUK DAPETIN KODENYA, KLIK DISINI


sc: blognya-reggy.blogspot.com