Tutorial : Scrollbar with Background Image

Tumblr_mbc1hcflms1r2uvl2o1_500_large

Assalamualaikum and annyeonghaseyo. Hai hai. Ni dah masuk post yang keberapa entah. Tak ingat. LOL. Okay lah, tuto kali ni tieqa nak ajar something yang sangat simple, bak makan kacang goreng. Keke. Tuto mengenai scrollbar yg ada background. Faham tak? Tak faham. Takpe. Tngk contoh kt bwh ni.


:: PREVIEW ::

Template Designer
1. Dashboard > Design > Edit HTML
2. Tekan Ctrl + f dan cari code /* Header 

Template Classic / Blogskin
1. Dashboard > Template
2. Tekan Ctrl + f dan cari code </style>
3. Copy code di bawah ni
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  { height: 0px; display: block; background: #fff; }
::-webkit-scrollbar-track-piece  { background: #FFFFFF; }
::-webkit-scrollbar-thumb { border-radius: 1px; height: 50px;
background-image: url(URLIMG); }
::-webkit-scrollbar-thumb:hover { background-color: #eee; }
4. For template designer paste di atas code /* Header
5. For template classic paste di atas code </style>
6. Preview & save

Kuning : width & height. Bole adjust.
Purple : URL background

3 comment [s]:

Amni Adani said...

Akak, URL Background tu macam mana nak dapat? Anyway, thx for all the Tutobies... =) Menjadi =)

Nurul AtiQah said...

@Boleh amik dekat freebies background yg akak bg tuh..orait most welcome :)

Khadijah's Place said...

thanks :)