Show/Hide Cbox pada posisi atas

Membuat cbox Show/Hide pada bagian atas ini merupakan pengembangan kode dari kode-kode untuk membuat cbox Show/Hide sebelumnya, sebenarnya berawal dari Show/hide cbox pada sisi kiri atau kanan blog. Nekat adalah modal utama saya dalam hal otak-atik kode ini, karna saya bukanlah seorang yang ahli dibidang HTML ini...hehehe...

Tapi saya sangat bersyukur karena ALLAH.SWT telah memberikan sedikit kemampuan dan mengizinkan saya untuk mengolah kode ini... (*Alhamdulillah).

Sebenarnya saya buru-buru buat posting tilisan ini, tapi demi sobat-sobat blogger yang telah me-request nya, dan mungkin tak sempat buat otak-atik kode-kode sebelumnya, maka akan saya persembahkan postingan ini untuk memberikan kemudahan pada sobat dalam membuat Show/hide cbox pada posisi atas :).

Yasudah langsung saja ya :
1. Login Blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL55CxyESM6UtLqGzqJ1lpvg0u8tkHzLNe17VQtBA8pYd24lZD9oEP8v8TbgCUgWsYgvLNFJHu4eZK_470u_eg_DvUlyickzeSeHINgMto5gKQoZf88WpeK05zp2HDtDEqswV_rIpH3V6M/) #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC5HJPVIeCagW9Jhg-DUsRXXOkhMvH3YdLtnOIdA0V42vxgvR1bWymnyzIoeqUsQFjx-O7p4eTa84O-PlpevvLWbyR-FP7EfJ29f0FB4ja9Y6d9ZsQdJDaJhQ_ayM37t1Am2gfrieXDA4/) 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/AVvXsEhrwMLyqp_6ZMyVjjhKVv79vBMvlX_cnhgBXB0-98PQ0AvEDDb5n4iF5LLZN-1XCEXpTNqcNE5DoCH-JZoKJ7S3SZ_zKZxRwY7r4VBTXW_-xzgkO3O7riUVvHofzsrWGqyNtyAVSJy2AOU/" alt="close" title="Click here to Close Cbox" /></a></div>
<div align="left"><font size="2"><a http://exeloph.blogspot.com/2010/10/showhide-cbox-pada-posisi-atas.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By enda fiVers</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>

5. Save
6. Tambahkan Gadget HTML/Java script lagi untuk Icon Navigasinya, copas kode berikut :

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBxyzqvYkslwO-_UyuSYO9IZjsMlXfvQV-ivP0gVmW1_ANJsj4CiWu5ycycm0AiG4KEWx33j9Ro5ffVeFGSP1U5xfuNGcmvMrG3i8wCMq7LhqShNjGB0I_Z2t972cYcuIMGYqrXresDw4/" alt="cbox" title="Click here to open Guest Book" /></a>

7. Save

Note :
- Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
- Yang Berwarna biru adalah background cbox (*Buat cbox nya transparan lihat disini)
- Tang berwarna merah ganti dengan kode Cbox
- Yang berwarna kuning adalah URL icon navigasi Close

Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini.

hmm,,mungkin postingan ini dapat dikatakan postingan terakhir, karena beberapa hari/minggu kedepan saya disibukkan untuk penulisan laporan kerja praktek(*Mulai dari 5 oct 2010). Mohon do'a sobat-sobat semua untuk kelancaran dalam menyelesaikan tugas-tugas saya.

Makasih..
Catatan : "Jika sobat tertarik buat posting tulisan ini, jangan lupa untuk mengingat saya" hehehee
Silahkan bertanya kalau ada yang kurang jelas
dan saya juga dapat ni artikel dari  : http://exeloph.blogspot.com/ 
hanya untuk membantu tmen ane yg bertanya  ....