cara memasang widget Cbox show pada posisi di atas

Membuat Cbox show pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat Cbox show sebelumnya, sebenarnya berawal dari show Cbox pada sisi kiri atau kanan blog. nah sekrang kita akan belajar membuatnya, udah ngk sabar kan ayo langsung saja ngak usah pake berlama-lamaan.

Cara buat widget Cbox show

1. Login ke blogger
2. Pilih Rancangan 

3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut 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 #ff0000;
background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif) #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://alba.fnatic.com/lab/fnatic/fnaticGUI_css_v4_black_background.jpg) no-repeat;">

KODE CBOX 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/AVvXsEjufNjyC7zA5ALapUj-t7lZ-TJ1ZFnR3XCNLYhsg-zBerjuz-YDsbJRN1JR4x-xyKuE8VBAT4VDMLSuSOLOy3OD3YrJ6uiBmmCQ2jV3XBrfcac0tWoYaV1dPqufa_Q-oYPGr7J4DzyUUN0/" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a http://ini-hanya-blog.blogspot.com/2011/02/cara-memasang-widget-cbox-show-pada.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Fadhil corbin</span></div></a></font></div>
</div></div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></center>

6. Simpan jika sudah selesai

7. Tambahkan Gadget HTML/JavaScript lagi untuk icon navigasinya, masukkan kode berikut :

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://www.cidbones.com/assets/images/guestbook1.gif" alt="cbox" title="Click here to open Guest Book" /></a>

8. Simpan jika sudah selesai

Note :

Kode-kode yang berwarna merah biasa anda ganti dengan kode yang anda pilih sendiri.

hmm, jangan lupa untuk berkomentar ya.