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/AVvXsEh9N3ukVipycJYmVj7CuFlForKy5gM4TL_gwndG64VNy1R0atH6m12eaCCitVBVkxyCkrFwW0dfU5VkZaCdQaXsHST1WdTiV_o_J4cJpovNAXATUsZnD9h9_swEIdasqCI1byEtBjiHOHI/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.

.Lalu,bagaimana yang belum buat?,klik Cara Membuat Chat Box (Buku Tamu). ikuti saja langkah-langkahnya dan semoga berhasil.ok, jadi saya rasa mudah saja untuk membuat chat box melayang seperti yang sudah saya  contohkan diatas.

Tweet