Maret 25, 2012

Css ScrollBar Untuk Merubah Warna, Bentuk dan Ukuran Scroll

Situseo Blog : Merubah warna bentuk dan ukuran scroll dengan css scrollbar, warna bentuk dan ukuran scrollbar standar adalah seperti yang terlihat pada sebelah kiri layar kalian, jika halaman bog kalian yang dibuka, untuk memberi tampilan berbeda seperti warna bentuk dan ukuran pada scroll, kalian bisa menambahkan kode CSS Scrollbar.

Sayangnya css scrollbar ini belum didukung oleh browser Mozila hanya baru support untuk browser Chrome miliknya google. Sudah saya coba menggunakan -moz- tapi memang mozila belum mendukung css scrollbar ini, padahal pengguna mozila terutama diindonesia masih banyak. Jika kalian membuka Situseo Blog pada browser selain chrome tentu saja tampilan scrollbar-nya akan seperti biasa. Tidak ada salahnya jika kalian menggunakan css scrollbar ini digunakan pada blog kalian untuk mempercantik tampilannya, walupun hanya bisa terlihat berbeda pada browser chrome saja.

Cara ini hampir sama seperti kita memberi perintah kepada browser untuk teks seleksi (css selection), cuma bedanya css selection sudah didukung oleh mozila. Untuk cara menampilkan scrollbar yang berbeda, baik itu warna, ukuran dan bentuk, kalian cukup copy paste kode css scrollbar dibawah ini dan letakan diatas kode ]]></b:skin>, dalam beberapa template penempatan css scrollbar ini tidak berjalan dengan baik jika diletakan diatas kode ]]></b:skin> seperti pada template Situseo Blog, untuk mengatasi hal itu kode css scrollbar bisa diletakan dibawah kode <b:skin><![CDATA[

::-webkit-scrollbar {
width: 10px;
background: #cc3000;
-webkit-border-radius:10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #000000;
-webkit-border-radius:10px;
border-radius: 10px;
}

Dengan menggunakan kode tersebut akan menghasilkan scrollbar seperti terlihat pada kanan layar atau pada  kotak scroll kode pada post diatas.

Untuk menyesuaikan warna scroll dengan warna dasar blog, kalian bisa merubah pada bagian background dengan merubah kode warnanya, ukuran pada kode width dan bentuk pada kode border-radius.

Semoga bermanfaat,

12 Diskusi untuk Css ScrollBar Untuk Merubah Warna, Bentuk dan Ukuran Scroll

25 Maret 2012 11.23  

pertamax :D

keren nih blog kk hehehe

25 Maret 2012 20.56  

Mwantabs gan, mksih ilmu2nya

26 Maret 2012 07.52  

Nice trik sahabat..

26 Maret 2012 14.15  

Hebat tutorialnya tapi ini apa akan memberatkan loading blog dak ?

26 Maret 2012 17.47  

@Muhammad Abu Abdillah menurut saya tidak ya mas, sebab ini hanya untuk perintah kepada browser

14 April 2012 10.27  

sipp thanks Infonya

17 April 2012 09.10  

Sip keren mas . :D

21 Oktober 2012 14.33  

Thx gan!!

29 Januari 2013 05.53  

Makasih gan buat tutorial pembuatan Scrollbar nya, semoga saja dikemudian hari bisa didukung browser firefox juga

21 Februari 2013 15.15  

wah, keren artikelnya gan.

#Salam Blogger

16 Maret 2013 16.59  

CSS ini berfungsi pada browser apa saja bung..??

2 Juni 2013 20.39  

keren! keren! kereeeeen!!

Poskan Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top