HOMEPAGE
THE AUTHOR
FREEBIES
TUTORIALS
DESIGN PROCESS
PORTFOLIO

Tutorial Cantikkan Scrollbar (google chrome only)

Assalamualaikum semua :)

Today, aten nak update tutorial. Act, dah lama orang tu request tutorial.
Baru harini aten teringat. Tutorial kali ni ialah cantikkan scrollbar. Siapa yang taktahu tengok gambar bawah ni...


Tekan gambar tu untuk tumbesaran. dan, tengok anak panah merah tu dia tunjuk arah mana?
okay yang itu lah aten nak ajar :)
Act, tutorial ni sesuai untuk google chrome only. kalau guna mozilla firefox dia takkan jadi. Percayalah?

Jum kita mulakan..

For pengguna classic template 
1. dashboard > template
2. korang tekan F3 then search code ni ;
</style>

For washed denim 
1. dashboard > design > edit html
2. tekan F3 then search code ni ;
/* Header

Okay, pengguna classic and washed denim , korang copy code bawah ni then paste kat atas code yang korang cari tadi tu. Faham?

::-webkit-scrollbar {
width:7px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
height:10px;
width:2px;
display:block;
background:#b4defa;
border:1px solid white;
}
::-webkit-scrollbar-track-piece  {
background-color:#ffffff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color:pink;
border:1px solid white;
}

Yang warna merah tu korang boleh tukar ikut suka korang yee :)

4. korang preview dulu. kalau jadi, tekan save yee :)

#that all for today. leave a comment.

20 comments:

  1. Kak, takpa ke adik nak warna scroll bar sama dengan kak ? :D

    ReplyDelete
  2. Welcome, aimi tukar lah warna scroll bar aimi tu yee :)

    ReplyDelete
  3. Thanks for the tuto, very helpful. x

    ReplyDelete
  4. ikhlas ni , kalau pakai simple template pun boleh ikut yang ni ! tengs sangat !! :)

    ReplyDelete
  5. nice tutorial..tapi kak guna firefox la dik..so tak dapat nak demonstrasi..hihi

    ReplyDelete
  6. hehehe, sokay.. nanti pakai lah google chrome ye :)

    ReplyDelete
  7. kenapa takboleh tekan right clik ye?

    ReplyDelete
  8. aten disable kan right click. awak highlight code tu then tekan ctrl and c kat keyboard awak tu secara serentak untuk copy.

    ReplyDelete
  9. Fatin , kalau nak buat scrollbar macam aten punya macam mana ? boleh ajarkan ?

    ReplyDelete
  10. @puteri islam : tutorial ni mcm aten punya lah syg.

    ReplyDelete
  11. Assalamualaikum, kenapa tak mau ya? :s sorry

    ReplyDelete
  12. dah dapat. yaay! alhamdulillah. thanks ;)

    ReplyDelete
  13. Jadilah, dari dulu cari ni tuto mkasih ka fatin :)

    ReplyDelete

Terima kasih atas komen yang diberikan. Jangan lupa datang lagi untuk cerita yang terbaru. Salam sayang dari owner blog

 
Thankyou for visiting | Template made by Fatin Hazwani.