Cara Membuat widget tersembunyi dengan CSS

 

Kali ini saya mau mencoba share mengenai cara membuat widget tersembunyi dengan CSS, kenapa CSS ? kenapa tidak javascript / jquery kan lebih bagus ? memang benar javascript / jquery memberikan hal lebih dimana apapun dapat dilakukan dengannya tapi sobat harus tahu bahwa bahasa pemrograman tadi membutuhkan size lebih bila ditaruh pada blog itulah sebabnya pepatah blogger mengatakan "Perbanyak CSS kurangi Javascript" itu memang ada benarnya. Oke kembali ke topik utama kita sebetulnya mudah saja dalam melakukannya dan kelebihan utama cara ini yaitu kita menggunakan CSS sehingga lebih memangkas size tetapi kerugiannya penerapan ini hanya bisa digunakan pada browser - browser modern seperti firefox, chrome, opera tapi tidak apalah sekarang - sekarang ini browser tersebut sering dipakai.

Gambar di bawah ini adalah contoh dari widget buku tamu yang di sembunyikan

 









 Untuk demonya silahkan klik gambar di bawah ini



Langkah - langkahnya yaitu :

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 menjadi position: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

 

Simpan dan kemudian Save dan lihat hasilnya


NOTE :
jika kalian ada masalah karena posisi nya mebelakangi / membawahi elemen lain silahkan baca tutorial singkat mengenai Menerapkan sistem tumpang tindih.

Demikian artikel Cara Membuat widget tersembunyi dengan CSS ini. Semoga dapat bermanfa'at