Tuesday, June 14, 2011

[Tutorial] Customize Scrollbar

Salam and hello peeps~


Tadi yana bukak formspring yana. Then ade orang tanya pasal scroll bar kat blog yana nie. Untuk tidak mengecewakan hati si penanya itu, yana pun buat la tutor tu hari nie. *perghh! ayat takleh blah weyh! =='*

This one :

# Click picture to zoom in #

1. Dashboard > Design> Edit HTML

2. Ctrl + F search for this code
]]></b:skin>

3. Dah jumpa? Copy code nie dan paste sebelum code tadi.

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #000000;
}
::-webkit-scrollbar-thumb {
background-color: #FFFFFF;-moz-border-radius: 10px;
border-radius: 10px;
}

Code warna biru tu untuk background scroll bar tu. Korang boleh rujuk >sini<
Yang warna merah tu pulak yang scroll tu. Korang boleh tukar warna yang korang nak ataupun boleh letak gambar yang korang nak.

4. Kalau nak letak gambar, code merah tu korang gantikan dengan code nie.
background-image:url(URL IMG);
URL IMAGE tu korang boleh letak image yang korang nak.

5. Kalau nak tambah border pun boleh je. Letak sebelum code } ye?
border: 1px solid #000000;

6. Then preview. Kalau dah puas hati just Save! :)

No comments:

Post a Comment

Thanks for comment. Come again! ^_^