- Back to Home »
- Blogger , Popular Post »
- cara memasang floating chat box pada blog
Dengan cara memasang floating chat box pada blog tentu saja cukup
berguna bagi pemilik blog. Sebab dapat dijadikan sebagai buku tamu untuk
para pengunjung blog kita. Tanpa basa-basi lagi. akan saya jelaskan
bagaimana cara memasang floating chat box pada blog.
1. Masuk ke Tata Letak Blogger anda.
2. Pilih Add Gadget.
3. Pilih Html/JavaScript.
4. Copy dan pastekan kode di bawah ini:
<style type="text/css">
#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:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
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:#000;">
<!-- Ganti dengan Kode cbox, shoutcamp atau shoutmix disini -->
</div>
</div>
<br />
<div
align="right"><a href="javascript:void(0);"
onclick="showHideAT()"><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirErrR5Mfqj7ktC-XnfEDI_atmKGbJnexQEuWcxTWlsTB23tY3Mqm9G88oQCEi0czUTb9XEK9S_d93zWm1ZwVFhnJDt8Uen320eO912aRx97e56czZtbMXjeE1ItEtGc_yRxhE2nEGQNE/s1600/CLOSE.png"
alt="close" title="Click here to Close Cbox"
/></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<center><a
href="javascript:void(0);"onclick="showHideAT()"/><img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyf2tLJCiMlVei0V0hBd-cZy7ORZaZg0TUeHCNpgFDCI7rvpSzN0B1pcRbE1KjMwBmmKr3zSZvrHo2fek9B7pqrtF7zTn41Rp-KQa5ywctj3xF4VSDZJ7GM_WTj-KPjGWVtUzgHcZgLjo/s1600/guestbook.png"
alt="cbox" title="Click here to open Guest Book"
/></a></center>
Demikianlah cara memasang floating chat box pada blog