| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Membuat widget tersembunyi dengan CSS


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 sok 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.

Disini dibahas cara :


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

 Demo
Disini sudah saya pasang demonya dengan tulisan Sorot ini


Sorot ini



3
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

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

66 komentar:

  1. wah sepertinya bisa di cobanih sob untuk membuat widget tersebunyinya...
    nice post sob..

    kunjungan perdana nih di blog sobat...

    BalasHapus
  2. @Asis Sugianto: oke sob silahkan dicoba ...

    BalasHapus
  3. Wahh mantef nih pokoknya pertamax dech..hahahyy

    BalasHapus
  4. @ICAH BANJARMASIN: iya sob hahaha ...

    BalasHapus
  5. wah, jadi bisa sembunyi gt GB nya.
    keren dah sob, kalo di WP bisa juga ga?
    ditunggu kunjungan baliknya ya sob
    happy blogging :)

    BalasHapus
  6. wah mantap sob tutornya, keren juga tampilannya juga ;)

    BalasHapus
  7. @Outbound Malang: mmm sepertinya bisa cuman beda cara buatnya doank saya tidak terbiasa dengan wordpress btw kunjungan baliknya dilaksanakan sob ...

    BalasHapus
  8. @wongcrewchild: haha iya sob thx ya supportnya ... :D

    BalasHapus
  9. wah, blognya 'rame' juga. sampai bingung neh #GapTek

    BalasHapus
  10. keren ni, coba ah. thank sob trik nya

    BalasHapus
  11. @galer vodgals: silahkan di coba sob :D

    BalasHapus
  12. menarik sekali blog full css,,,
    saya kepingin pake css tapi sepertinya ribet ya kalo mau modif,,,

    BalasHapus
  13. NIce Artikel Ne soob ..
    Bisa langsung di coba , Thx for share :D

    BalasHapus
  14. Weh keren,efek transisinya terasa banget

    BalasHapus
  15. mampir lagi sobat untuk belajar CSS di blog sobat, soalnya masih buram nih soal CSS sob...

    BalasHapus
  16. @Sakahayang Kang Asep: ya diawal memang tidak ada yang manis justru diakhir jika sobat bisa css pasti ada nilai lebihnya :)

    @sampeweweh: boleh sob

    @enonovan44: sama - sama sob

    BalasHapus
  17. @Musa Khairul Umam: iya sob terlebih itu pake css pasti ga seberat dan sebesar javascript

    @Asis Sugianto: silahkan sob belajar - belajar disini hehe ...

    BalasHapus
  18. @Adie Konoe Poetra Dyanaz: sam - sama sob ...

    BalasHapus
  19. keren blognya. makasi sharenya :)

    BalasHapus
  20. @adityaN8zz: thanks supportnya sob :)

    @Okumura Yukio: buat ??? *bingung

    BalasHapus
  21. Keren,, ijin coba ya sob Buku tamunya,,

    BalasHapus
  22. @AYRIY ZONE: silahkan sobat :)

    BalasHapus
  23. boleh d coba nih kk...

    oh iya udah aq follow kk, follow back ya...
    spotgooblog.blogspot.com

    BalasHapus
  24. @Catatan Mahasiswa: jangan panggil saya kakak wong masih SMA situ dah kuliah :D langsung meluncur sob

    BalasHapus
  25. Wah, desainer handal kyknya ne gan.
    salut sama kreasinya :)

    BalasHapus
  26. @hendsoe: thanks sob supportnya (:

    BalasHapus
  27. Sob 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
  28. @AYRIY ZONE: coba masukan script margin:auto di class .fwidget h3

    BalasHapus
  29. Kodenya di letakkan dimana sob,,

    BalasHapus
  30. ohya gak bisa dipindah ke sebelah kanan atas ya....
    kemarin dah edit" gak bisa

    BalasHapus
  31. @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
  32. @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

    BalasHapus
  33. @AYRIY ZONE: ga ada, pastikan kirimnya ke keith.Farizky@rocketmail.com or keith.keith.junior@gmail.com

    BalasHapus
  34. Sip bos dah jadi
    fwidget ....?
    FarkryzerWidget
    iya kan :)

    BalasHapus
  35. @Okumura Yukio: haha tahu aja :D

    BalasHapus
  36. Hak jadi deh sob,, Tu liyat Buku tamunya udah keren,, hehehehe

    BalasHapus
  37. Keren sob,gimana caranya agar posisi tombolnya berada tepat di pojok kanan atas?
    Mohon pencerahannya

    BalasHapus
  38. Sob 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
  39. @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
  40. @AYRIY ZONE: oke, saya kirim kalo dah selesai

    BalasHapus
  41. Sobat ada email lagi untuk sobat,, mohon di buka ya,,

    BalasHapus
  42. tulisan judulnya kok gk seperti di blog ini yah???
    mohon dibalas ke email saya " maz.opex@gmail.com "

    BalasHapus
  43. @all: thx kunjungannya

    @anwar sofi'i: ???

    BalasHapus
  44. mantap, gan! ini yang saya cari2. udah saya sesuaikan dengan tampilan blog saya, bener2 easy deh.

    BalasHapus
  45. Terimakasih ya sob atas infonya.Berhasil sob setelah dicoba.Nice sharing

    BalasHapus
  46. muanteb postingnya

    BalasHapus
  47. scipt anda sudah kami gunakan di http://www.limu2.com/, terima kasih sudah berbagi...
    salam !

    BalasHapus

Share entri ini :