Cara membuat widget Chatbox melayang diblog keren ~ BLOG Tips dan trick

Cara membuat widget Chatbox samping melayang diblog
Kali ini seperti pada judulnya saya akan share tentang Cara pasang widget chatbox samping.tampilan untuk widget samping ini memang sangat cantik untuk performance blog.
tapi juga punya sisi negative untuk blog.
Dah langsung aja mulai tutorialnya... yang negative2 ga usah dibahas cuman bikin pikiran kita jadi kotor

Langkah-langkahnya sebagai berikut :

Seperti biasa kita login ke blog

Klik Rancangan >> Elemen Laman >> tambah widget/gadget

Pilih HTML/javascript

copas kode dibawah ini :

<style type="text/css">
    #at{
    position:fixed;
    right:5px;
    z-index:+1000;
    }
    * html #at{position:relative;}
    .attab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .atcontent{
    float:left;
    border:2px solid #999;
    background: #000;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    -moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
    }
    </style>
    <script type="text/javascript">
    function showHideAT(){
    var at = document.getElementById("at");
    var w = at.offsetWidth;
    at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
    at.opened = !at.opened;
    }
    function moveAT(x0, xf){
    var at = document.getElementById("at");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    at.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="at">
    <div class="attab" onclick="showHideAT()"> </div>
    <div class="atcontent">

    <div align="center">
    <div style="background:#000;">

    KODE CHATBOX

    </div>
    </div>
    <br />
    <div align="left">Powered by :
    <a href="http://www.mujijayaganesha.com">MUJI JAYA GANESHA</a></div>
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()">
    <img border="0"   src="http://sites.google.com/site/mujijayaganesha1/img/close.png"
    alt="close" title="Click here to Close Cbox" /></a></div>
    </div></div>

    <script type="text/javascript">
    var at = document.getElementById("at");
    at.style.top = (-200-at.offsetWidth).toString() + "px";
    </script>

    <div style='display:scroll; position:fixed; top:200px; right:0px;'>
    <a href="javascript:void(0);"onclick="showHideAT()"/>
    <img src="http://sites.google.com/site/mujijayaganesha1/img/CHATBOX.png"/></a>
    </div>
    <div style="overflow:auto; width:auto; height:0px; padding:0px;
    border:0px solid     #e6e4e3;">
    <center></center></div>

-----Ganti dengan Kode Chatbox sobat

-----Relative [diganti bisa /tidak juga gpp]

Untuk Lebar dan Tinggi bisa diatur sesuai keinginan
Javasript ini bisa dimodifikasi untuk tampilan Pojok kiri atas , Pojok kiri bawah , tengah atas , tengah bawah

These icons link to social bookmarking sites where readers can share and discover new web pages.