Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3

Dunia Programming - Pada kesempatan kali ini, saya akan membagikan ilmu yang saya dapat tentang Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3, mungkin kalian tidak pernah berpikir, bisakah scroll bar pada browser kita ubah sesuai keinginan kita...? bagaimana cara merubah warna scroll bar..? merubah ukuran scroll bar dan lain lain..?.
Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3 - Dunia Programming
Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3

itu merupakan hal yang sangat sepele, namun bagi kalian yang baru terjun di dunia web desain pastinya akan senang dan merasa bahagia apabila kalian mendapatkan ilmu dengan cara merubah scroll bar dari tampilan browser.
"Bagaimana Cara Merubahnya...?"
Nah, untuk cara merubahnya sangat simpel, sekali, kalian hanya perlu menambahkan script CSS3 pada style atau css kalian. Dan langsung saja kita mulai pembuatan scroll barnya.

Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3


1). Buat folder baru dengan nama EfekScrollBar
2). Kemudian, buka Web Editor yang kalian punya, kalian bisa gunakan web editor apapun, dan untuk saran saya, gunakan Web Editor Sublime Text Versi 3 agar kalian bisa lebih mudah dalam melakukan proses pengcodingan

Baca Juga :


3). Setelah itu, buat file dengan nama index.html pada folder EfekScrollBar
4). Buat tampilan HTML sederhananya sebagai contoh, kalian bisa copy source code dibawah ini :

CSS3
<!doctype html>
<html>
<head>
<title>Belajar CSS3 - Dunia Programming</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Belajar CSS3</h1>
<p>Belajar Merubah Tampilan Scroll Bar Pada Web Browser</p>
<span><a href="http://www.programmingindo.com">Dunia Programming</a></span>
</body>
</html>

5). Setelah itu, buat file dengan nama style.css didalam folder EfekScrollBar, dan kemudian copy source code dibawah ini tapat pada file style.css

CSS3
/* Scrollbar */
::-webkit-scrollbar {
background:#181a1c;
width:5px;
}
::-webkit-scrollbar-thumb {
border-radius:3px;
background-color:#fece1a;
}

Keterangan :
untuk webkit-scrollbar itu merupakan perubahan pada background atau tempat scroll bar bergerak
untuk webkit-scrollbar-thumb merupakan warna atau desain dari scrollbar pada browser

6). Setelah semua langkah diatas kalian lakukan, selanjutnya buka file index.html yang sudah kalian buat menggunakan Browser Chrome, dan lihat bagaimana hasilnya.
"Min, kok saya buka di browser Mozilla Firefox dan Opera kok tidak ada perubahan ya..? padahal source codenya udah benar"
Nah, pertanyaan yang sangat bagus, untuk source code diatas hanya bisa berfungsi untuk browser Chrome, namun kalian juga bisa memfungsikan pada browser yang lain seperti Firefox, Opera dan Internet Explorer dengan cara sebagai berikut :

Firefox : -moz-
Opera : -o-
Internet Explorer : -ms-

ganti kata -webkit- dengan browser yang sering kalian gunakan, atau kalian bisa gunakan semua source code untuk Firefox dan browser lainnya, agar bisa dibuka di semua tampilan browser

Bagaimana..? sudah berhasil bukan..?

Dan nantikan tutorial-tutorial Dunia Programming selanjutnya, agar kalian tidak ketinggalan dengan tutorial Dunia Programming, silahkan kalian bisa Like Fanspage Dunia Programming atau bisa Subscribe dengan mengirimkan alamat email kalian pada kolom Subscribe Email, semoga bermanfaat, Terima Kasih

Post a Comment for "Cara Mendesain Scroll Bar Pada Browser Dengan Menggunakan CSS3"

Berlangganan via Email