Sabtu, 05 Januari 2013

0 Chat Box Auto Hide

Chat box aut hide maupun shoutmix ato hide kini sangat popular sekali di blog. Selain menarik ini juga dapat membuat kita tahu pendapat teman-teman ente semua yang berkunjung tentang blog ente. Istilahnya si buat tempat uneg-ungenya. Chat box adalah salahsatu widget paforit saya selain mudah menggunakanya ini bikinya free sob. alias geratis dantampilan juga smilies nya bisa kita modifikasi sesuka hati. asal ngerti . Ok deh sob begini ni cara membuat  Chatbox Auto hide ala Muhammad Refai.

 

  • Login dahulu ke blog ente
  • lalu masuk ke menu rancangan ---> Elemen Laman ---> Tambah Gadget --- > Html/Javascript
  • Masukkan kode di bawah ini sob 



    <style type="text/css">
    #gb{
    position:fixed;
    top:20px;
    z-index:+1000;
    }* html #gb{position:relative;}

    .gbtab{
    height:150px;
    width:50px;
    float:left;
    background:url('http://i46.tinypic.com/15np343.png') no-repeat;
    }

    .gbcontent {
    float:left;
    border:1px solid #000000;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-radius-bottomleft:5px;
    -o-border-radius-bottomleft:5px;
    -khtml-border-radius-bottomleft:5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    background: #F2F2F2; url() no-repeat bottom;
    padding:10px;
    }

    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
    gb.opened = !gb.opened;
    }function moveGB(x0, xf){

    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
    }</script>

    <div id="gb">
    <div class="gbtab" onmouseover="showHideGB()"> </div>

    <div class="gbcontent">
    <center>

     Masukkan Kode Chatbox Atu Shoutmix Anda Disini Sob 

    <br />
    <div style="text-align:center">
    <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://m-refai.blogspot.com/2012/07/chat-box-auto-hide-yang-gu-tau.html"> get this widget</a></span>
    </div>
    </center></div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (50-gb.offsetWidth).toString() + "px";
    </script>

    </div>
    <!--  chatbox by http://m-refai.blogspot.com/ FINISH--> 
    Sederhana dan mudah dipahami kan sob. Inget ya ganti tulisan yang berwarna biru dengan kode chatbox ente sob. Semoga bermanfaat ya

    0 Comments

    Bagaimana Pendapat Anda ?