Membuat ruang chatting untuk admin pada blog

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

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN 
• Tambahkan gadget,terserah posisi mana yang sobat sukai .

 

•  Lalu klik tambah  HTML/JavaScript

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

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/AVvXsEjehTooNkq6ffqBY7eGBz9vtj17e2PeNZPv7JvQkaj8fXvuX40ehflcjlGLt8Bc6kbC8-nK4r5Oiyjkp2ScmiTUPy0Xxw1TLdle2X1LdkIG68eKv-PRKvs8eQ8JC6OoQYK3D9cnBSLu2sNR/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/AVvXsEh8wAoLrDAWjb7ZPDlK8pu8Ypjm36PdjgxRH8v5Zusy4HkpokON-VVcn1KjH5kD4f0p4eBbsBiI8Orkvt3jqGwOXYmN47f03YSNdDxGbSAnaknOKVijmiWwUpfla5kVqNVKtVyHPYY2FIDj/s1600/logo+chat.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

catatan :

• link yang saya warnai kuning adalah gambar icon close pada kotak chat bisa anda ganti dengan variasi icon lain yang sobat sukai.
• sedangkan link warna merah adalah gambar icon logo chat sobat bisa rubah dengan icon chat lain nya.
• oh ya usahakan icon nya pakai format .png ya agar gambar nya kelihatan bagus.

Semoga artikel sederhana ini bisa memberi sedikit kecantikan pada blog kita ...saran kritik nya di tunggu untuk kreasi selanjut nya...

Sumber : Dunia Desain Web