Cara Customize Blogger Scroll Bar


Ada yang tertanya-tanya macam mana nak customize scroll bar? Jom ikuti tutorial saya ini. Bukan sekadar copy paste, saya juga akan menerangkan satu persatu webkit element yang kita gunakan. Trend customize scroll bar sudah lama sebenarnya daripada JPanel, jquery hinggalah sekarang ini yang popular WebKit. Ianya lebih mudah dengan menggunakan properties vendor-prefixed seperti ::-webkit-scrollbar dan Shadow DOM. Saya tidak akan terangkan pasal Shadow DOM. Anda boleh google sendiri OK.

Pseudo Element

Pseudo Element adalah bahagian-bahagian yang terdapat dalam membentuk scrollbar.

::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ }






Pseudo Class Selectors

Membenarkan lebih banyak pilihan spesifik untuk setiap bahagian dalam pelbagai keadaan.

:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive

Untuk tutorial kali ini kita hanya menggunakan keadaan seperti  :window-inactive. Sekiranya anda ingin mengetahui lebih lanjut tentang setiap definisi keadaan di atas boleh rujuk article daripada Dave Hyatt di webkit berkenaan styling scrollbar.

Berikut adalah contoh code CSS penuh untuk bahagian scroll bar yang saya gunakan untuk blog ini. Boleh adjust width dan color ikut kesesuaian blog anda. Gunakan notepad ++ atau yang anda mahir untuk edit code. Untuk cari code color boleh pergi dekat HTML Color Codes info.

Cara nak masukkan dalam blog. Mudah saja macam ABC.

Masuk dashboard anda. Pergi dekat Template > Customize
*Pastikan buat backup template terlebih dahulu!


Lepas tu Pilih Advance > Add CSS


Copy dan paste code yang anda sudah edit tadi di ruangan yang disediakan. Kemudian klik Apply to Blog. Lihat perubahan pada scrollbar anda. Cantik? Hehe tahniah!

Dah baca? Jangan lupa tinggalkan komen anda!

Related Posts Plugin for WordPress, Blogger...

Pengumuman Cuti Tempah Blog


Pihak Tempah Blog dengan sukacita memaklumkan bahawa tempahan blog sudah dibuka semenjak 20 Ogos 2013. Beberapa maklumbalas yang kami terima bertanyakan

"Kenapa menutup tempahan selama sebulan di bulan Ramadan?"

Sebenarnya bukan pada tahun ini saja kami menutup tempahan blog pada bulan puasa. Tetapi tahun sebelum-sebelumnya juga telah kami amalkan. Ini berikutan untuk menghormati bulan Ramadan al-Mubarak, sebagai bulan ibadah.

Apa salahnya kan? Bulan Ramadan hanyalah sebulan. Untuk menunggu bulan Ramadan kena tunggu 11 bulan. Selama 11 bulan juga kami sudah berpeluh-peluh bekerja siang malam mencari nafkah. Rasanya tidaklah rugi kalau sebulan saja kami tutup :).

Well, setiap orang ada pendapat masing-masing. Memang tidak dinafikan bulan puasa semakin banyak tempahan diterima. Alhamdulillah. Terima kasih kepada pelanggan-pelanggan yang setia menunggu tempahan disiapkan. Cuma rasa terkilan sedikit untuk bulan ini tidak sempat memberi hadiah hari raya pada semua pelanggan. InsyaAllah tahun depan OK.

Pengumuman Cuti Tempah Blog telah pun dibuat di FB Fan Page kami. Seperti berikut,

Bermula 31/8/2013 pihak kami akan menutup tempahan pada hari sabtu dan ahad. Penutupan pada cuti umum sekiranya diumumkan sahaja.

Untuk tempahan blogspot boleh terus hubungi Fatin Fadillah
Untuk tempahan wordpress dan website boleh hubungi Tabir Khaizuran

Terima kasih kerana menggunakan perkhidmatan kami.
Selamat Menyambut Hari Kemerdekaan




Admin
Tabir Khaizuran


Yups, Sabtu Ahad kami akan menutup tempahan blog bagi memberi ruang kepada saya melihat anak yang jauh nun di Terengganu. Mahu jerit rindu kalau tak jumpa sehari inikan pula seminggu. Wawawa.

Maka, siapa-siapa yang nak order boleh direct email form atau call saya untuk saya susun atur tugasan. Terima kasih sekali lagi kerana memahami situasi saya dan Tim Tempah Blog.

ZassSSss..

Dah baca? Jangan lupa tinggalkan komen anda!

Related Posts Plugin for WordPress, Blogger...