Membuat widget tersembunyi dengan CSS Di bawah Blog
Ini 100% buatan saya jadi jika sobat mau copast entri ini silahkan saja tapi dengan syarat backlink ke sini
Nah Pada entri yang sekarang ini saya selaku Farkryzer Adminsok resmi 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 pemrogramman 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.
Langkah - langkahnya yaitu :
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
3 Simpan dan kemudian Save dan lihat hasilnya
Akhir kata saya ucapkan Terima kasih sudah mau membaca entri ini semoga bermanfaat, silahkan isi kotak komentar apabila ada yang sobat tanyakan mengenai cara tadi ...
Nah Pada entri yang sekarang ini saya selaku Farkryzer Admin
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'>
</div>
Keterangan :.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>
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
Akhir kata saya ucapkan Terima kasih sudah mau membaca entri ini semoga bermanfaat, silahkan isi kotak komentar apabila ada yang sobat tanyakan mengenai cara tadi ...
- Atau bila perlu kirim email kepada saya apabila ingin bertanya lebih dalam, tetapi mohon maaf apabila dibalasnya terlalu lama mungkin saat itu saya sedang sibuk. Tapi bakal dibales secepatnya :)
- Atau +saya di google plus dan chat disana Terima kasih
Another Linked
Home
Movie Wars
Tutorial and Software
Top