Blog yang berisi segala informasi terbaru yang anda butuhkan...

Advertisement

Cara Membuat Tombol Chatbox Melayang

ADSENSE HERE!
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 Add
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://lh5.googleusercontent.com/-r1i4MbA737M/TXe_geYYU9I/AAAAAAAAB5A/PgOy7-VjLAE/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="http://4.bp.blogspot.com/-fHBM9HXm280/UMMsl3zDypI/AAAAAAAAADY/zbmlwDGVXaw/s1600/23232323232323.png"  /></a></div>
6. Tekan Simpan/Save
7. Lihat Hasilnya

Sekali Lagi Terimakasih Telah Membaca Artikel ( Ini )
ADSENSE HERE!

2 comments:

iklan

iklan

iklan

Copyright © Ditentukan Blog. All rights reserved. Template by CB. Theme Framework: Responsive Design