Cara Membuat widget tersembunyi dengan CSS

Diposting oleh Muhammad Iqbal on Sabtu, 18 Agustus 2012

 

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

Rendered Image

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

Ditulis Oleh : Muhammad Iqbal ~ Turitorial Blog

Anda sedang membaca sebuah artikel yang berjudul Cara Membuat widget tersembunyi dengan CSS . Terimakasih atas kunjungannya dan semoga artikel ini dapat bermanfa'at.

:: Thank you for visiting ! ::

Comments
0 Comments

{ 0 komentar... read them below or add one }

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

 
^ Back to Top