Kotak Chat muncul dari atas

Bagi teman-teman yang ingin mempunyai kotak chat seperti punya saya, yang muncul dari atas berikut cara-caranya.
1. Log-in terlebih dahulu ke Blogger
2. Lalu masuk ke Rancangan --> EDIT HTML
3. Buatlah Gadget baru dengan meng klik Tambah GADGET
4. Lalu akan muncul jendela tambah gadget
5. Pilih HTML / Javascript
6. Lalu Copy-Pastekan kode HTML di bawah ini, jangan lupa ganti kode yg berwarna merah dengan code shoutmix mu

<div class='widget-content'>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://dhedyfaste.xp3.biz/blog/chat2.gif" alt="cbox" title="Click here to open Guest Book" style="display:scroll;position: fixed; top:0px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" ;" height="80px" width="80px" /></a></center>

</div>

<div class='clear'></div>

<span class='widget-item-control'>

<span class='item-control blog-admin'>

<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=2827876066130152602&widgettype=html&widgetid=html12&action=editwidget' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML12"));' target='confightml12' title='edit'>

<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>

</a>

</span>

</span>

<div class='clear'></div>

<div class='widget html' id='html4'>

<div class='widget-content'>

<style type="text/css">

#at{

position:fixed;

right:450px;

z-index:+1000;

}

* html #at{position:relative;}

.attab{

height:200px;

width:70px;

float:left;

cursor:pointer;

background:url();

}

.atcontent{

float:left;

border:2px solid #ff0000;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5axIOSeV3ZqClU_JKRIu5vv3g1qw3QoY8Hkpqplv0sVBW_9CSpwJTy4ys4of75k2Hy7dIKwO3OhMEcxDopngfHoa6s9dORyD1IhTSwDoRWruY7CE9RDLdJ7swRvmLTB72Rf_EqjWcj-PG/) #000000 repeat-y center;

-moz-border-radius-topleft:15px;

-moz-border-radius-topright:15px;

-moz-border-radius-bottomleft:15px;

-moz-border-radius-bottomright:15px;

padding:10px;

}

</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:url(http://i69.servimg.com/u/f69/14/99/52/12/hacked12.jpg) no-repeat;">

<!-- Begin ShoutMix - http://www.shoutmix.com -->

Ganti Script yang berwarna merah ini dengan kode SHOUTMIX  anda

<!-- End ShoutMix -->

</div>

</div>

<br />

<left><a href="javascript:void(0);" onclick="showHidehcl()"><img border="0" src="http://gardaperdana.com/button/folder-home-48x48.png" alt="Tips & Triks" title="Click here to open My Blog" /></a>

</left>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://withblog.blogspot.com/2010/12/kotak-chat-muncul-dari-atas.html">Dapatkan seperti ini!</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<right><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBz2a9HmuJwz-eiVxfGDtKu1dZ32JNvtjSTaTv4uuv5cz9ao5NgD7y7xzEqaVaddfmYRb1DLQCyGCYWFFtRWw0-YqASGJkfQ8QaIb0TL1EcpSYEeu_czD5c1x6qYwRmg7PlQXDVnD8Gho/" alt="Tips & Triks" title="Click here to Close Cbox" /></a>

</right></div></div>

<br />

<script type="text/javascript">

var at = document.getElementById("at");

at.style.top = (-200-at.offsetWidth).toString() + "px";

</script>

</div></div>

7.       Setelah itu ketik simpan

8.       Lihatlah perubahan pada blog mu

Selamat bekerja, semoga sukses