Tutorial Scroll Bar Cute

PENTING!

Sebelum membuat apa-apa pengubahsuaian template anda (pada Edit HTML) , anda dinasihatkan supaya mem'backup dahulu template untuk langkah keselamatan jika berlaku error semasa membuat pengekodan template. Klik SINI untuk melihat tutorial untuk membuat BACKUP dan RESTORE Template... :)

Tutorial kali ini untuk buat scroll bar anda jadi lebih menarik seperti gambar diatas. Anda juga boleh   mengubahnya mengikut kreativiti anda.

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1 pada GAMBAR 1) " dan klik "Template (rujuk no 2 pada GAMBAR 1)".

GAMBAR 1

3. Klik pada " Edit HTML (rujuk no 3 pada GAMBAR 2) "

GAMBAR 2

4. Tick pada Expand Widget Templates (rujuk no 4 pada GAMBAR 3)

GAMBAR 3

5. Tekan CTRL+F dan cari kod di bawah (rujuk no 5 pada GAMBAR 4):

]]></b:skin>

GAMBAR 4

6. Copy (CTRL+C) kod dibawah:

::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece  {
background-color: #A9F5D0;
border: 3px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #01DFA5;
border: 1px solid #FFFFFF;
}

## Anda boleh gantikan kod :

• #A9F5D0 - warna background bagi scrollbar track
• #FFFFFF - warna bagi border scrollbar track
• #01DFA5 - warna background bagi scrollbar thumb
• #FFFFFF - warna bagi border scrollbar thumb

7. Paste (CTRL+V) kod yang di copy tadi sebelum kod " ]]></b:skin> "  . (rujuk no 6 pada GAMBAR 5)

GAMBAR 5

8. Klik Preview dan kalau ok klik Save Template (rujuk GAMBAR 6)

GAMBAR 6