Trik Menyembunyikan Cbox Diatas Blog

Berhubung banyak sobat blogger yang menanyakan cara membuat cbox tersembunyi diatas seperti di blog saya ini. Saya buatin aja tutorialnya buat sobat semua. Sebenarnya agak menyimpang dari tema blog saya karena tidak membahas tentang tutorial blog tapi karena banyak permohonan kali ini tak apa2lah.hehehe

Langsung to the point aja saya kasih tutorialnya :D
Silahkan ikuti step by step berikut :
1. Login Blogger
2. Pilih Perancangan>>Elemen laman
3. Tambahkan Gadget HTML/Java script (Jangan diberi judul)
4. Copas kode berikut :

<style elbtype="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://lh4.ggpht.com/_yF0--u7KSSI/TKYaaJhxVdI/AAAAAAAAAvY/nBUewsjG-Ck/bg-cbox.jpg) no-repeat;">
Kode Cbox Disini

</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://lh4.ggpht.com/_yF0--u7KSSI/TKAy32pYhuI/AAAAAAAAArM/68dgmHYFy8M/close.png" 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="http://lh5.ggpht.com/_yF0--u7KSSI/TKAS0Ee4NLI/AAAAAAAAAq0/HLbB4jGuFxk/GuestBook.png" 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

Semoga bermanfaat buat sobat semua. Trik ini juga saya blajar dari blog Enda Fivers. Saya bisa kalian juga pasti bisa... Selamat mencoba...

Komentar