Float Chat Box (Chat Box Melayang / Tersembunyi)

Sudah tidak asing lagi kan dengan trik yang ini. Float Chatbox atau Chat melayang. Yang bisa dimunculkan dan disembunyikan di sisi browser. Untuk contohnya, kalian bisa lihat di blog-blog lain. Banyak yang memakai. Namun saya tidak memakainya lagi agar DickeyMaru tidak terlalu berat.

Chatbox Melayang Disebelah Kanan

Berikut ini adalah script Float ChatBox untuk yang melayang di sisi sebelah kanan browser.
  1. Masuk ke Blogger kamu, pilih Tata Letak / Design, Edit HTML.
  2. Sebelum mengedit, BackUp Template kamu terlebih dahulu untuk berjaga-jaga jika ada kesalahan.
  3. Trus Copy kode dibawah ini
    #dmcr{position:fixed; top:50px; z-index:+1000}
    * html #dmcr{position:relative}
    .dmcrtab{height:125px; width:30px; float:left; cursor:pointer; background:url(http://1.bp.blogspot.com/_GaKwmMcf4N4/TSKIXCAopTI/AAAAAAAAD_M/2pHBa3Gzb5w/s1600/dmrchat.png) no-repeat}
    .dmcrcontent{float:left;border:2px solid #db4b0c; background:#000000; padding:10px}
    .dmcr-close{font-size:13px}
    .dmcr-close{color:#db4b0c}
    .dmcr-close a{text-decoration:none}
  4. Lalu paste kode tadi diatas kode:
    ]]></b:skin>
  5. Kemudian, kembali ke Rancangan / Design
  6. Klik Tambah Gadget / Add Gadget, pilih HTML / JavaScript.
  7. Lalu masukkan script berikut ini:
    <script type="text/javascript">
    function showHidedmcr(){
    var dmcr = document.getElementById("dmcr");
    var w = dmcr.offsetWidth;
    dmcr.opened ? movedmcr(0, 30-w) : movedmcr(20-w, 0);
    dmcr.opened = !dmcr.opened;
    }
    function movedmcr(x0, xf){
    var dmcr = document.getElementById("dmcr");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    dmcr.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("movedmcr("+x+", "+xf+")", 10);}
    }
    var dmcr = document.getElementById("dmcr");
    dmcr.style.right = (30-dmcr.offsetWidth).toString() + "px";
    </script>
    <div id="dmcr">
    <div class="dmcrtab" onclick="showHidedmcr()"> </div>
    <div class="dmcrcontent">
    <center>

    <!--KODE CHATBOX KAMU DISINI-->

    </center>
    <br />
    <div class="dmcr-close">
    <Script type='text/javascript' src='http://www.fileden.com/files/2009/11/17/2654961/My Documents/dmflchat.txt'></Script>
    <span style="float:right">
    <a href="javascript:showHidedmcr();">
    [Close]
    </a></span></div>
    </div></div>
    Untuk yang berwarna biru, kamu ganti dengan kode widget chatbox kamu.
  8. widget kamu.

Chatbox Melayang Disebelah Kiri

Kalau yang ini adalah petunjuk untuk memasang float chatbox di sisi sebelah kiri browser.
  1. Masuk ke Blogger kamu, pilih Tata Letak / Design, Edit HTML.
  2. Sebelum mengedit, BackUp Template kamu terlebih dahulu untuk berjaga-jaga jika ada kesalahan.
  3. kamu copy kode dibawah ini:
    #dmcl {position:fixed;top:50px;left:0px;z-index:+1000;}
    * html #dmcl {position:relative;}
    .dmcltab {height:125px;width:30px;float:left;cursor:pointer;background:url(http://lh3.ggpht.com/_GaKwmMcf4N4/TSKIXMZgWOI/AAAAAAAAD_Q/2tGNSNYWd3A/dmlchat.png) no-repeat;}
    .dmclcontent {float:left;border:2px solid #db4b0c;background:#000000;padding:10px;}
    .dmcl-close {font-size:13px}
    .dmcl-close {color:#db4b0c}
    .dmcl-close a {text-decoration:none}
  4. Lalu paste kode tadi diatas kode:
    ]]></b:skin>
  5. Kemudian, kembali ke Rancangan / Design
  6. Klik Tambah Gadget / Add Gadget, pilih HTML / JavaScript.
  7. Masukkan kode berikut ini:
    <script type="text/javascript">
    function showHidedmcl(){
    var dmcl = document.getElementById("dmcl");
    var w = dmcl.offsetWidth;
    dmcl.opened ? movedmcl(0, 30-w) : movedmcl(20-w, 0);
    dmcl.opened = !dmcl.opened;
    }
    function movedmcl(x0, xf){
    var dmcl = document.getElementById("dmcl");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    dmcl.style.left = x.toString() + "px";
    if(x0!=xf){setTimeout("movedmcl("+x+", "+xf+")", 10);}
    }
    var dmcl = document.getElementById("dmcl");
    dmcl.style.left = (30-dmcl.offsetWidth).toString() + "px";
    </script>
    <div id="dmcl">
    <div class="dmclcontent">
    <center>

    <!--KODE CHATBOX KAMU DISINI-->
    </center>
    <br />
    <div class="dmcl-close">
    <span style="float:left">
    <a href="javascript:showHidedmcl();">
    [Close]
    </a></span>
    <Script type='text/javascript' src='http://www.fileden.com/files/2009/11/17/2654961/My Documents/dmflchat.txt'></Script>
    </div>
    </div><div class="dmcltab" onclick="showHidedmcl()"> </div>
    </div>
  8. Kemudian
Sekarang Float ChatBox mu telah sukses ditambahkan. Lihat hasilnya di blog kamu.
Comments

12 comments:

  1. Bagus... Tapi Waktu baru buka blog langsung keluar.... Nggak di sembunyiin dulu... Khan itu mengganggu!!

    ReplyDelete
  2. thanks ya scriptnya, dah berhasil dicoba di blogku yg lain

    ReplyDelete
  3. :b: kadang chat boxnya ga mau nutup knapa ya koh?
    jadi melayang di sebelah kanan terus dan hanya mau hilang sewaktu di refresh halaman

    ReplyDelete
  4. huhuhuhuhuhuhuuuuuu pux q koq g' biiizzaaaaaa..,,...
    :f:

    ReplyDelete
  5. [Reply to: Bia's paradise] Loading blog kamu terlalu berat itu...
    biasanya Karena kebanyakan widget,,,

    [Reply to: kiddrockstrange] aaaarggggghhhhhh,,, :f:

    ReplyDelete
  6. chatbox kok cuman muncul close aja

    ReplyDelete
  7. Makasih buat info nya, ane coba dulu... hihi...

    ReplyDelete
  8. Gx ada kata Buku Tamu , ChatBox Atau yg laen nya
    gmana nih ? :f:
    Tolong kasih yang ada Tulisan Buku Tamu , CBOX , Chat DLL lah
    Thank's

    ReplyDelete
  9. Gan template nya mantep mau dong :g:

    ReplyDelete
Related posts
Guestbook
Author


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other