Masih di catatan Kuliahku Cara Bagaimana Membuat widget tersembunyi keren ini di
blog Mu
Silahkan sobat Copy Paste script di bawah ini simpan di blog sobat
<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>
Untuk penyimpanan kode script di atas dengan cara silahkan log in terlebih dahulu di blog sobat >> klik Rancangan >> klik ADD Gadget >> klik HTML/Javascript , kemudian paste script diatas , simpan dan lihat hasilnya semoga bermanfaat
Catatan :
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
float:left : letak widget disembunyikan disebelah kiri rubah menjadi right apabila ingin kanan jangan lupa rubah margin-left:95px menjadi margin-right:95px
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
Untuk contohnya klik DEMO
Post a Comment