Cara Membuat Tombol Chatbox Melayang

Cara Membuat Tombol Chatbox Melayang

MikiMaru 8 Desember 2012 - Ok Sekarang Saya Akan Mempostingkan Postingan Yang Berjudul Cara Membuat Tombol Chatbox Melayang Pertama Saya Ingin Berterimakasih Telah Membaca Artikel Yang Berjudul Cara Membuat Tombol Chatbox Melayang Saya Akan Berbagi Tutorial Blog Ini Untuk Anda Pengunjung Setia Blog MikiMaru Tanpa Basa Basi Lagi Ayo Kita Bahas Tutorial Ini :

1. Login Ke Blogger
2. Lalu Tekan Tombol Bawah Di Salah Satu Blog Anda
3. Pilih Layout
4. Tambah Gadget Pilih HTML/JavaScript
5.Lalu Masukkan Kode Di Bawah Ini Di Kolom Yang Tersedia

<style>
    #at{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    * html #at{position:relative;}
    .attab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .atcontent{
    float:left;
    border:3px solid #fff;
    background: #000;
   border-bottom-left-radius:10px;border-bottom-right-radius:10px;right:0px;
    padding:10px;
    -moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
    }
    </style>
    <script>
    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:#fff;">  ISI DENGAN KODE CHAT BOX ANDA
</div>
    </div>
    </div>
    <br />
    <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGBjlHTb80YjViD98OPShSHZIIhAdQmpCzM4pB0ymLuwcdeAOuUe1xD3X_ZumGb7N9Q_H7EdcOUtM6KZhdlgw731JwqRIqt-CffcBkYmy7FtrNTdk5_jKja9D9NZL9r7wKXcIJ0EzGFLT/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
    </div></div>
    <script>
    var at = document.getElementById("at");
    at.style.top = (-200-at.offsetWidth).toString() + "px";
    </script>
  <div style='display:scroll; position:fixed;border:2px solid #000;top:0px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;right:550px;background:#fff;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugPmfMZV2yIIqaXdE43Vb41dzGbJAJQAT33AYd5RRd0M9MYrlnLt6AmPpuNu50Q1gSSyq_LA1jLd7Ckif-wDLwtOJoFhA8oOEwTyEhd92YvRFVrEJYR-gt_h5nkFhKFebsNlslm-9ho4/s1600/23232323232323.png"  /></a></div>

6. Tekan Simpan/Save
7. Lihat Hasilnya

Sekali Lagi Terimakasih Telah Membaca Artikel ( Ini )