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 Admin
Disini dibahas cara :
- Membuat widget tersembunyi dengan CSS
- Membuat buku tamu tersembunyi dengan CSS
- Membuat widget tersembunyi fade in dan fade out dengan CSS
- Membuat buku tamu tersembunyi fade in dan fade out dengan CSS
- Membuat widget tersembunyi tanpa javascript
- Membuat buku tamu tersembunyi tanpa javascript
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
Demo
Disini sudah saya pasang demonya dengan tulisan Sorot ini
3
Simpan dan kemudian Save dan lihat hasilnyaNOTE :
jika kalian ada masalah karena posisi nya mebelakangi / membawahi elemen lain silahkan baca tutorial singkat mengenai Menerapkan sistem tumpang tindih
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
wah sepertinya bisa di cobanih sob untuk membuat widget tersebunyinya...
BalasHapusnice post sob..
kunjungan perdana nih di blog sobat...
@Asis Sugianto: oke sob silahkan dicoba ...
BalasHapusKok nggak bisa?
Hapussiep gan...
BalasHapus@Ope' baft: oke sob ...
BalasHapusWahh mantef nih pokoknya pertamax dech..hahahyy
BalasHapus@ICAH BANJARMASIN: iya sob hahaha ...
BalasHapuswah, jadi bisa sembunyi gt GB nya.
BalasHapuskeren dah sob, kalo di WP bisa juga ga?
ditunggu kunjungan baliknya ya sob
happy blogging :)
wah mantap sob tutornya, keren juga tampilannya juga ;)
BalasHapus@Outbound Malang: mmm sepertinya bisa cuman beda cara buatnya doank saya tidak terbiasa dengan wordpress btw kunjungan baliknya dilaksanakan sob ...
BalasHapus@wongcrewchild: haha iya sob thx ya supportnya ... :D
BalasHapuswah, blognya 'rame' juga. sampai bingung neh #GapTek
BalasHapushaha kenapa harus bingung :D
BalasHapuskeren ni, coba ah. thank sob trik nya
BalasHapus@galer vodgals: silahkan di coba sob :D
BalasHapusmenarik sekali blog full css,,,
BalasHapussaya kepingin pake css tapi sepertinya ribet ya kalo mau modif,,,
izin nyoba sobat :D
BalasHapusNIce Artikel Ne soob ..
BalasHapusBisa langsung di coba , Thx for share :D
Weh keren,efek transisinya terasa banget
BalasHapusmampir lagi sobat untuk belajar CSS di blog sobat, soalnya masih buram nih soal CSS sob...
BalasHapus@Sakahayang Kang Asep: ya diawal memang tidak ada yang manis justru diakhir jika sobat bisa css pasti ada nilai lebihnya :)
BalasHapus@sampeweweh: boleh sob
@enonovan44: sama - sama sob
@Musa Khairul Umam: iya sob terlebih itu pake css pasti ga seberat dan sebesar javascript
BalasHapus@Asis Sugianto: silahkan sob belajar - belajar disini hehe ...
Pertamax gan
BalasHapusNice share
@Adie Konoe Poetra Dyanaz: sam - sama sob ...
BalasHapuskeren blognya. makasi sharenya :)
BalasHapusArigato Gozaimasu :)
BalasHapus@adityaN8zz: thanks supportnya sob :)
BalasHapus@Okumura Yukio: buat ??? *bingung
Keren,, ijin coba ya sob Buku tamunya,,
BalasHapus@AYRIY ZONE: silahkan sobat :)
BalasHapusboleh d coba nih kk...
BalasHapusoh iya udah aq follow kk, follow back ya...
spotgooblog.blogspot.com
@Catatan Mahasiswa: jangan panggil saya kakak wong masih SMA situ dah kuliah :D langsung meluncur sob
BalasHapusWah, desainer handal kyknya ne gan.
BalasHapussalut sama kreasinya :)
@hendsoe: thanks sob supportnya (:
BalasHapusSob mau tanya nih,, gimana ya cara supaya Tulisan BUku Tamunya itu kelihatan full, Saya Ko' Tulisan Buku Tamunya agak sembunyi di bawah,,Mohon pecerahannya ya sob,,
BalasHapus@AYRIY ZONE: coba masukan script margin:auto di class .fwidget h3
BalasHapusKodenya di letakkan dimana sob,,
BalasHapusohya gak bisa dipindah ke sebelah kanan atas ya....
BalasHapuskemarin dah edit" gak bisa
@AYRIY ZONE: kalo cssnya belum dirubah rubah height-nya di dalam .fwidget kalo bisa kirim aja sob scriptnya ke email saya soalnya susah kalo ngedit tanpa liat scriptnya nanti saya kirim kalo dah jadi ...
BalasHapus@Okumura Yukio: kalo gagal, pada class .fwidget ganti margin-left:95px jadi terserah sobat misalnya margin-left:700px, (700px menandakan space/margin dari sebelah kiri) jgn lupa ganti margin .fwidget:hovernya ukurannya sesuaikan keinginan
BalasHapusUdah Dikirim Sob Scriptnya,,
BalasHapus@AYRIY ZONE: ga ada, pastikan kirimnya ke keith.Farizky@rocketmail.com or keith.keith.junior@gmail.com
BalasHapusSip bos dah jadi
BalasHapusfwidget ....?
FarkryzerWidget
iya kan :)
@Okumura Yukio: haha tahu aja :D
BalasHapusHak jadi deh sob,, Tu liyat Buku tamunya udah keren,, hehehehe
BalasHapusKeren sob,gimana caranya agar posisi tombolnya berada tepat di pojok kanan atas?
BalasHapusMohon pencerahannya
@AYRIY ZONE: sip sob :D
BalasHapusSob Script Buku Tamunya udah dikirim nih,, kalo bisa saya pngen tampilannya Tulisan "buku tamu" nya seperti sobat yg kecil,, gak terlalu besar seperti saya,, kalo terlalu kecil tulisan buku tamunya malah gak kelihatan tulisannya sob di blog saya,,
BalasHapus@Ajangnya orang Sumba berbagi Ilmu pengetahuan: pada .fwidget ganti margin-left:95px jadi terserah sobat misalnya margin-left:700px, (700px menandakan space/margin dari sebelah kiri) jgn lupa ganti margin-left .fwidget:hovernya ukurannya sesuaikan keinginan
BalasHapus@AYRIY ZONE: oke, saya kirim kalo dah selesai
BalasHapusOke sobat,, terima kasih,,
BalasHapusSobat ada email lagi untuk sobat,, mohon di buka ya,,
BalasHapuskeren dan top
BalasHapuswiiiy nice tutorial !
BalasHapustulisan judulnya kok gk seperti di blog ini yah???
BalasHapusmohon dibalas ke email saya " maz.opex@gmail.com "
thanks infonya sob,,
BalasHapusdesy
BalasHapus@all: thx kunjungannya
BalasHapus@anwar sofi'i: ???
keren gan....
BalasHapusmantap, gan! ini yang saya cari2. udah saya sesuaikan dengan tampilan blog saya, bener2 easy deh.
BalasHapusTerimakasih ya sob atas infonya.Berhasil sob setelah dicoba.Nice sharing
BalasHapusperlu dicoba nih sob
BalasHapusINFO YANG MENARIK NICH SOBAT
BalasHapusThank's gan infonya.
BalasHapusmuanteb postingnya
BalasHapusscipt anda sudah kami gunakan di http://www.limu2.com/, terima kasih sudah berbagi...
BalasHapussalam !
keren gan,ijin sedot..
BalasHapus