Membuat Hidden Chat Box Versi 2

 share kali ini Membuat Chat Box di Samping Blog (Hidden Chat Box), nah kali ini saya kembali share Membuat Hidden Chat Box Versi 2. Dari keduanya, hampir sama, yang membedakan cuma tampilanya saja, kebetulan saya jatuh cinta dengan tampilan yang versi 2 ini. Seperti yang saya pakai di blog saya sekarang ini. Baiklah sob yang berminat ingin memasang atau mengganti Chat Box-nya silakan langsung dipraktekkan saja. Ok sob kita langsung menuju ke TKP, cekidot.......
 
 
1. Login ke Akun Blogger sobat.
2. Masuk ke Tata Letak/ Rancangan.
3. Pilih tambah gadget, lalu HTML/JavaScript dan copy pastekan kode di bawah ini.

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:5px; -webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:5px;background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">

<!-- Ganti ini dengan Kode Chat Box yang sobat dapatkan dari situs pembuat Chat Box -->

<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Catatan : Pada tulisan yang bercetak biru di atas, silakan sobat ganti dengan kode Chat Box yang sobat dapatkan dari situs di mana sobat membuat Chat Box. Untuk tingginya, sobat tinggal mengganti Top-nya sesuai dengan keinginan sobat.
Minggu, Januari 23 Posted in | | 4 Comments »

One Responses to "Membuat Hidden Chat Box Versi 2"

  1. Oktaviana says: Reply To This Comment

    Nice info..

  1. Aldhi Prizty Ghamely. Z says: Reply To This Comment

    @Oktaviana Makasih..

  1. BeuRaJa says: Reply To This Comment

    terima kasih bang,,, udah lama saya coba.. kali ini saya berhasil buat chat box "tersembunyi"

  1. Ishaq Muhammad says: Reply To This Comment

    Thank's for information.......
    Join in my site
    www.storingsound.blogspot.com

Write a comment