Membuat widget tersembunyi dengan CSS

oke sob, kai ini saya akan berbagi tentang cara Membuat widget dengan CSS.
Langsung aja ya ...!? :D

1. Buka Tata Letak Blogger kemudian buat widget HTML baru.
2. Kemudian sobat tinggal copy pastekan script dibawah ini :

<style type='text/css'>
.fwidget{background:#000;border-radius:5px;bottom:-5px;box-shadow:0 0 5px #fff;color:#fff;float:left;height:25px;margin-left:95px;opacity:.8;overflow:hidden;padding:auto;position:fixed;text-shadow:0 0 5px #000;width:90px;z-index:9;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out}
.fwidget:hover{background:transparent;border:2px solid #000;box-shadow:0 0 15px #000;color:#000;height:450px;margin-left:20px;opacity:1;width:240px}
.fwidget-body{-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}
.fwidget h3{cursor:point;font-size:13px;text-align:center}
</style>

<div class='fwidget'>
<h3>Judul Widget</h3>
<div class='fwidget-body'>

<center>MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU</ceenter>

</div>
</div>

Keterangan :

background:#000 : warna background sebelum dibuka #000 = hitam
background:transparent : warna background sesudah dibuka transparent = transparan
bottom:-5px : posisi widget disembunyikan dibawah rubah bottom menjadi top bila menginginkan posisi diatas
margin-left:95px : rubah dengan nilai sesuai keinginan dengan aturan makin besar nilainya posisinya makin kekanan
position:fixed : apabila sobat ingin membuat widget ini tidak ikut pindah ketika discroll rubah menjadiposition:absolute
height:25px dan width:90px : adalah tinggi dan lebar sebelum dibuka rubah angkanya
height:450px dan width:240px :adalah tinggi dan lebar sesudah dibuka
Judul Widget : Ganti dengan judul widgetnya / Tulisan tombolnya
MASUKAN SCRIPT WIDGETNYA MISALNYA BUKU TAMU : Ganti dengan script widget yang akan dipasang
<center> dan </ceenter>   : hilangkan apabila widget tidak rata tengah

3. Save

mudah kan, selamat mencoba .. :)