Membuat Ruang Chatting untuk Admin pada Blog

Kadang untuk memanjakan suatu blog banyak segala cara yang di lakukan si pemilik blog . .bisa dengan menyajikan konten-konten yang menarik, memberi berbagai fasilitas dan kemudahan untuk pembaca dan lain sebagainya. . 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 lainnya blog kita makin di sayang oleh pengunjung he. .he. . asalkan jangan orangnya di sayang kan bisa berabe... (  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 lainnya .

Mari kita coba membuat nya....

• Seperti biasa, anda login terlebih dahulu. .kalau sudah login silahkan langsung ke RANCANGAN 
• Kemudian 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/AVvXsEihqWGK_dd_mbGKCK1bLNCvUGq1k9Emyfxa9QorTyyvlOZsO6Z3cFaf9JDQJ2qMKqkC4RMI88gRJ7Q9EgKiI2fluc3aZMxeCnD6jiop0nRQIi7ui7lFN_LiEHRESf7pLRoesC4_K8N9wnep/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/AVvXsEhNZSnI1jDEVLeHLIu81HirrDRBgXzKzBJ0vGfizAwj2uTFhTavMd7zzkBzDHdNNSWiqgW6CcS4Md7iA8nzMjMB6yRwZU-UBeCLsKryyJg0TcjfegRRNFaWNDPGHiFewrHZERaYIBCc6dPZ/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 .
• Kemudian untuk tulisan yang berwarna biru adalah code yang dapat anda masukkan berupa gambar maupun code chat box anda , ataupun bentuk tulisan .
• Oh yaa. . usahakan icon nya pakai format .png ya , agar gambarnya kelihatan bagus .
• Jangan lupan klik SIMPAN .

Cukup sampai disini saja sob , artikel yang sederhana ini semoga dapat bermanfaat untuk mempercantik blog kita . .salam dan kritiknya di tunggu untuk motivasi agar dapat menuju ke arah lebih baik . .mohon maaf bila banyak kekurangan yang ada. .

Jangan lupa klik tombol like gan !!