Sabtu, 12 Maret 2011

Buat Kotak komentarmu auto hide!!

Salam hangat buat gobloggers semua,

Sekarang saatnya buat saya berbagi kembali dengan kalian satu tutorial. Sebelumnya salah satu teman saya bertanya bagaimana cara membuat daftar tamu/kotak komentar kita bisa sembunyi sendiri (auto hide) di bagian kanan blog. Jadi untuk itu tanpa panjang lebar, mari kita mulai.

Sebelumnya untuk kamu semua yang belum memiliki kotak komentar dapat membuatnya di shoutmix atau cbox. Maka kalian akan mendapatkan kode untuk dipasang di blog kalian. Di sini kita akan tahu bagaimana membuat kotak komentar tidak seperti biasa, cekidot.




Pertama, buka blog kalian dan masuk ke pengaturan
Kedua, pilih tambah gadget kemudian pilih HTML/JAVASCRIPT
Ketiga, Copy-Paste 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('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">

    <!-- Ganti ini dengan kode buku tamu kamu -->

    <br/>
    <br/>
    <a href="http://forantum.blogspot.com">.
    </a>
    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>



Selanjutnya, Pada kode di atas, cari kode dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya.
Selesai.

Mudah bukan??
Sekarang saatnya kalian mencoba.


Artikel Terkait:

Recent Post

4 komentar:

Intan Febrina Wulandini mengatakan... [Reply to comment]

thanks gilang dah dibuat tutornya..
ayo-ayo tutor yg lainnya donk...
:)

goblogging mengatakan... [Reply to comment]

@Intan Febrina Wulandini

iya tan, tutor yang lain menyusul..

abu fatimah mengatakan... [Reply to comment]

thanks a lot sobat ... I like U're share

Firman Ilham mengatakan... [Reply to comment]

wacch,, nice gan

visit back http://fhirman-ilham.blogspot.com

Posting Komentar

 

follow me via fb

Followers

Pernah goblogging