Membuat Chat Box Melayang

Membuat Chat Box(buku tamu)melayang.Kemarin saya telah mempostingkan cara membuat chat box dan sekarang saya akan kembali memostingakan cara membuat chat box.Uppssss :~ ....jangan pergi dulu! karena chat box yang ini berbeda dengan chat box sebelumnya,kali ini chat boxnya akan bisa muncul dan bersembunyi ketika diklik.Langsung saja.

1. Loggin ke blogger.
2. Pilih rancangan>>Elemen laman.
3. Klik add a Gadget>>HTML/JavaScript
4. Klo udah kopas kode dibawah ini kedalam gadget tadi.

<!--  chatbox by http://planktoon.blogspot.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI94vjTxWUN8J5orjieFlPct_v0ZeGldOAZXEr42oqVLLmwPWD2-raMg5ld7r58VGMQEKU-Sa1MltdSfzGGkDw110vs_QFKsuS2YKgw0ZHe7_eHcT1COLysXgmGSLzJl2PRHylZSiOPvQ/s1600/guest-book.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">
masukan kode chatbox/buku tamu sobat di sini
<p><span style='float:right;font:italic 8px Arial, Sans-Serif;'><a href='http://planktoon.blogspot.com/2012/04/membuat-chat-boxbuku-tamumelayang.html' target='_blank'>::get this widget:: </a></span></p>
<div style='clear:both;'/>
<br />
<div class="hc-credit">
<span style="float:left">

</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- chatbox http://planktoon.blogspot.com/ END -->

       5.Ganti tulisan yang berwarna merah dengan kode chat box yang udah sobat buat kemudian save.

Lha, klo belum buat gimana?? Caranya disini Sob
 

Sumber: http://planktoon.blogspot.com/2012/04/membuat-chat-boxbuku-tamumelayang.html