Show Hide Pure use CSS for Cbox

Entah sudah berapa postingan mengenai trick show/hide yang kebanyakan digunakan dalam urusan . Yup's benar sekali, yaitu menyembunyikan keberadaan sesuatu agar tidak tampak yang padahal ada keberadaannya (~~roaming language~~) Silahkan sobat cari dengan keyword show hide pada kotak search yg tersedia :) pasti buanyak deh trick²nya ;)
Masih berbicara mengenai tips muncul & sembunyi, kali ini Beben Koben si bloglang anu ganteng kalem tea akan mencoba berbagi hanya dengan menggunakan pure 100% CSS. Tertarik enggak nih :-" Demo...

Klik buat mengambil link!
Letakin seluruh ramuan CSS sebelum/diatas kode </b:skin> Ini bumbu²nya :P

Kode CSS

#sidebar {
top: 50px;
z-index: 3000;
position: fixed;
right: -385px;
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}
#sidebar .benDiv {
margin:0px;
padding: 15px;
color: #fff;
font-weight: bold;
padding-right: 95px;
background-color: #5566FF;
border-radius: 15px;
-moz-border-radius: 15px;
text-shadow: 1px 2px #000;
box-shadow: 0 0 20px #000;
-moz-box-shadow: 0 0 20px #000;
-webkit-box-shadow: 0 0 20px #000;
}
#sidebar .beDiv {
float: right;
height: auto;
width: 285px;
padding-left: 15px;
}
#sidebar:hover {
right: -80px;
}

Kode HTML

<div id="sidebar">
<a href="#" title="open here">
<div class="benDiv">
O<br />P<br />E<br />N
<div class="beDiv">

YOUR CONTENT (CBOX) HERE'S

</div>
</div>
</a>

</div>

Jika sobat kepengen memakai image/gambar, tinggal hapus lalu ganti deh yg bertuliskan O<br />P<br />E<br />N Kode HTML bisa dimasukan via Add a Gadget ► HTML/Javascript tapi bisa juga didalam tag <body> ... </body> template ;)
Semoga bermanfaat :)
Happy blogging \m/