Sekarang Saya berbagi Tutorial ini akan menunjukkan kepada Anda bagaimana memodifikasi scroll bar browser default, untuk sesuai dengan website Anda.

 

Step 1 :
Sebelum Anda melanjutkan, perhatikan bahwa ini hanya akan bekerja di Google Chrome dan browser Safari sejauh ini. 

 Pergi ke Control Panel -> klik pada menu "Design" -> klik pada "Desain Manajement CSS"
 

 

Step 2 :
Memodifikasi kode struktur dan kemudian paste pada CSS Anda.
::-webkit-scrollbar-button {background-image:url(BACKGROUND GAMBAR ANDA );background-repat:no-repeat;width:12px;height:18px} 
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color:#000;} 
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px;background-color:#006699;} 
::-webkit-scrollbar-thumb:hover{background-color:#008BCE;} 
::-webkit-resizer{background-image:url( RESIZER'S BACKGROUND.png);background-repeat:no-repeat;width:12px;height:18px} 
::-webkit-scrollbar{width: 12px;} 

Penjelasan: 

 

1 ::-webkit-scrollbar-button untuk tombol panah.
2 ::-webkit-scrollbar-thumb adalah untuk bar 

3 ::-webkit-scrollbar-track adalah untuk latar belakang scroll bar, yang hitam di default tetapi Anda dapat mengubah warna dengan mengganti # 000000 atau dengan kata "white" oleh setiap warna HEX 

4 ::-webkit-resizer untuk Textarea resizer 


5 ::-webkit-scrollbar adalah untuk lebar scroll bar.

Lain Serikat: 

 Ini adalah beberapa negara lain.

 

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

Anda dapat menentukan satu sebagai contoh berikut:

::-webkit-scrollbar-thumb:hover{css-style- Kamu}
                       ===================================== ===================================== 

Langkah 3: 
  Klik save dan kemudian memeriksa situs Web Anda 
 

===================================== ===================================== 

Alternatif methd untuk menerapkan pengaturan: 

Jika Anda menggunakan desain default UcoZ dan Anda punya masalah, cobalah untuk menggunakan metode ini 

 Pertama Anda harus mengupload file ini dari file manager Anda, ke folder css [menciptakannya jika tidak ada] 
 [Klik kanan dan pilih "save link as ..."]  

Pergi ke control panel -> Design -> Quick substitution of template parts -> beralih ke Multi-Line Replacement Method. 

dalam  "Find" cari, enter
 

Code

</head>

dan dalam "Ganti dengan", masukkan 

Code

<style type="text/css"> 
@import url("$HOME_PAGE_LINK$/css/scrollbars.css"); 
</style> 
</head>

 

===================================== 

Berikut adalah contoh code di website:
 

Code

::-webkit-scrollbar-button {background-image:url(http://darkionsblog.com/images/scrollbarbutton.png);background-repat:no-repeat;width:12px;height:18px} 
::-webkit-scrollbar{width: 12px;} 
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);background-color:#000;} 
::-webkit-scrollbar-thumb {-webkit-border-radius: 10px; border-radius: 10px;background-color:#006699;} 
::-webkit-scrollbar-thumb:hover{background-color:#008BCE;-webkit-transition: all .3s ease-in-out;} 
::-webkit-scrollbar-corner, ::-webkit-resizer{background-image:url(http://darkionsblog.com/images/scrollbarbutton.png);background-repeat:no-repeat;width:12px;height:18px}

Selesai....

SELAMAT MENCOBA, SEMOGA SUKSES...