Cara Membuat scrollbar cantik untuk blog

        Scrollbar telah menjadi suatu kelengkapan pada banyak program. Objek ini memungkinkan seseorang dapat berinteraksi dengan suatu perangkat berbasis teknologi seperti sebuah komputer dengan memberikan kemudahan. Scrolling secara elektronik pada program atau dokumen merupakan fungsi scrollbar yang utama. Pada Dasarnya scrollbar berfungsi untuk menggeser lembar kerja secara vertical (vertical Scroll Bar) dan Horizontal (Horizontal Scroll Bar).

nah, dibawah ini adalah langkah langkah membuat scrollbar cantik! cekidot!!!

1.Masuk ke Dashboard > Template > edit HTML
2.Tick Expand TemplatE Widget dan tekan F3 atau CTRL + F bersamaan dan cari kode:

    ]]></b:skin>

atau

    /* Header

3.Letakkan kode scrollbbar di bawah nanti tepat di atas salah satu kode tersebut di atas.

Srollbar yang pertama, persis seperti di blog aku:

Membuat scrollbar cantik untuk blog seperti gambar diatas,
Kodenya:

    ::-webkit-scrollbar {
    width:15px;
    height:10px;
    }
    ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
    height:10px;
    width:10px;
    display:block;
    background:#FF95CA;
    border:1px solid #842B00;
    }
    ::-webkit-scrollbar-track-piece {
    background-color:#FFFFFF;
    }
    ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
    background-color:#ACD6FF;
    border:1px solid #FFFFFF;
    }

Scrollbar kedua :

Membuat scrollbar cantik untuk blog seperti gambar diatas,
Kodenya:

    ::-webkit-scrollbar {
    width: 9px;
    height: 7px;
    }
    ::-webkit-scrollbar {
    width: 9px;
    height: 7px;
    }
    ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment  {
    height:10px;
    width:10px;
    display:block;
    background: #CAFFFF;
    border:1px solid #842B00;
    }
    ::-webkit-scrollbar-track-piece  {
    background-color: #FF69B4;
    border: 4px solid #fff;
    }
    ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
    background-color: #ff7575;
    border: 1px groove #FE80DF;
    }

Yang ketiga adalah scrollbar hover:

Membuat scrollbar cantik untuk blog seperti gambar diatas,
Kodenya sebagai berikut:

        ::-webkit-scrollbar {height: 12px;width: 12px;background: #FFD2D2;}::-webkit-scrollbar-thumb {background-color: #00AEAE;-moz-border-radius: 10px;border-radius: 10px;}::-webkit-scrollbar:hover {height:12px;width: 12px;background: 
        #FF95CA;}::-webkit-scrollbar-thumb:hover {background-color: #00CACA;-moz-border-radius: 10px;border-radius: 10px;}

4.Langkah terakhir tekan pratinjau dulu baru simpan template.

By : Cutt Iswahyuni
Sumber : http://3.bp.blogspot.com