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/AVvXsEj3-_tWRr3kQ0RkRb41P5aCGQpTYiK9u4B6dSmq7xOB0hrvCg3-ObeNCxDNeAheCa0S8vilwpTYvd346aTBGwSO0TZHp0UH9hhftL6X6B_fB4fMnFAISx2KM_e4qZp-qaLwKJYJwrWbYqYu/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/AVvXsEjNLKUQaXz0qMePJFFfBrdi1obPf3jPzPgSt42yZvdrjUMFzLObdkxfK1TQp9d9rimKyZjhyphenhyphenTjtDZU8KcUh533C-l2oYnS76J6RwBBPuPsWsngeeaONMECKg7u0T96xYHUAvIh2pwdr7Yw/s1600/23232323232323.png"  /></a></div>

6. Tekan Simpan/Save
7. Lihat Hasilnya

Sekali Lagi Terimakasih Telah Membaca Artikel ( Ini )

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.