Bagaimana Membuat widget tersembunyi keren ini


Bagaimana Membuat widget tersembunyi keren ini


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


Labels:

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget