Hidden Chatbox

Posted: February 18, 2013 in BLOGGER
hai sobat cloud booster dan para sobat DR-Xkali ini saya akan share cara HIDDEN CHATBOX

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Contohnya seperti punyaku yang ada di sebelah kanan dan kiri., Manfaat dari Hidden Chatbox ini untuk menghemat template blog., Apakah kalian mau menggunakan cara seperti ini ? ya udah akan ku kasih tau caranya.
Caranya sebagai berikut :

  1. Login ke Blogspot >> Rancangan >> Elemen Laman
  2. Itu kan sudah langsung ke Elemen Laman terus Tambah Gadget >> Edit HTML/ Javasript
  3. CopPas kode di bawah ini :Left Hidden Chatbox
    <!–left hidden chatbox by http://dopind.blogspot.com/ START –>
    <style>
    #hcr {
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #hcr {position:relative;}
    .hcrtab {
    height:96px;
    width:96px;
    float:right;
    cursor:pointer;
    }
    .hcrcontent {
    float:right;
    border:2px solid #003e82;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type=”text/javascript”>
    function showHidehcr(){
    var hcr = document.getElementById(“hcr”);
    var w = hcr.offsetWidth;
    hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
    hcr.opened = !hcr.opened;
    }
    function movehcr(x0, xf){
    var hcr = document.getElementById(“hcr”);
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcr.style.left = x.toString() + “px”;
    if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}
    }
    </script>
    <div id=”hcr”>
    <div onclick=”showHidehcr()”> </div>
    <div>

    <!– KODE SHOUTMIX ANDA DISINI –>

    </div>
    <br />
    <div>
    </div>
    </div>
    <script type=”text/javascript”>
    var hcr = document.getElementById(“hcr”);
    hcr.style.left = (30-hcr.offsetWidth).toString() + “px”;
    </script>
    <!– left hidden chatbox by http://dopind.blogspot.com/ END –>

    Right Hidden Chatbox

    <!– right hidden chatbox by http://dopind.blogspot.com/ START –>
    <style>
    #hcr {
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #hcr {position:relative;}
    .hcrtab {
    height:96px;
    width:96px;
    float:left;
    cursor:pointer;
    }
    .hcrcontent {
    float:left;
    border:2px solid #003e82;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type=”text/javascript”>
    function showHidehcr(){
    var hcr = document.getElementById(“hcr”);
    var w = hcr.offsetWidth;
    hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
    hcr.opened = !hcr.opened;
    }
    function movehcr(x0, xf){
    var hcr = document.getElementById(“hcr”);
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcr.style.right = x.toString() + “px”;
    if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}
    }
    </script>
    <div id=”hcr”>
    <div onclick=”showHidehcr()”> </div>
    <div>
    <!– KODE SHOUTMIX ANDA DISINI –>
    </div>
    <br />
    <div>
    </div>
    </div>
    <script type=”text/javascript”>
    var hcr = document.getElementById(“hcr”);
    hcr.style.right = (30-hcr.offsetWidth).toString() + “px”;
    </script>
    <!– right hidden chatbox by http://dopind.blogspot.com/ END –>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s