Kadang untuk memanjakan suatu blog banyak segala cara yang di lakukan si empu nya blog ..bisa dengan menyajikan konten-konten yang menarik,memberi berbagai fasilitas dan kemudahan untuk pembaca dan lain sebagai nya..nah artikel kali ini saya coba membuat suatu fasilitas sederhana berupa ruang chat untuk admin agar pembaca dan pengunjung pada blog kita dapat ber interaksi langsung dengan kita..dan mungkin manfaat lain nya blog kita makin di sayang oleh pengunjung he he asalkan jangan orang nya di sayang khan bisa berabe... ( red : bercanda)

Pada blog ini bisa anda lihat ruang chat yang saya pake untuk sementara ini...fasilitas ruang chat untuk blog banyak di sedia oleh beberapa situs seperti meebo,  chat pingbox dari yahoo messenger dan lain sebagai nya.

namun di artikel ini saya mencoba ruang chat pingbox dari yahoo dan di kesempatan selanjut nya akan saya coba untuk membahas lain nya.

Mari kita coba membuat nya....

 

<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;">

DISINI LETAK KODE CHAT ANDA,GAMBAR,MAUPUN TULISAN

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3xZxlbCsTPcTF0IH9BQ4rZw8e_2h38NybqzuGTxf2iDGoUCZroLYt3vB18UaZ6KMy1NNA5SFaOSRJfAOlTtId7Wju48-De2zxVwDOkoRxzJzUssFKvBNJD0ZDWUSyoV5O31Yd7O6xXZO/s1600/CLOSE.png" /></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/AVvXsEgRXb0NaQeoK0_Mlg41-063VQpIKqWcf_6wmAbw5GhJ_kd5DHKzj2UumY5efMLo8OV-SanaW_3pfN9t063388Y5xY90GVoztPPlcSd23Qu1Lju5SGo6NTkz7AOMAvZbcfqrX8V7GOyLftCf/s1600/logo+chat.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Artikel yang sederhana ini semoga dapat bermamfaat untuk mempercantik blog kita ..salam dan kritik nya di tunggu untuk motivasi agar dapat menuju ke arah lebih baik..mohon maaf berbagai kekurangan yang ada..