Anda Sedang membaca Merubah Bentuk dan warna ScrollBar

Merubah Bentuk dan warna ScrollBar

  • Rabu, 18 Juli 2012
  • azhar
  • Cara ini hampir sama seperti kita memberi perintah kepada browser untuk teks seleksi (css selection), cuma bedanya css selection sudah didukung oleh mozila. Untuk cara menampilkan scrollbar yang berbeda, baik itu warna, ukuran dan bentuk, kalian cukup copy paste kode css scrollbar dibawah ini dan letakan diatas kode ]]></b:skin>, dalam beberapa template penempatan css scrollbar ini tidak berjalan dengan baik jika diletakan<b:skin><![CDATA[

    ::-webkit-scrollbar {
    width: 10px;
    background: #cc3000;
    -webkit-border-radius:10px;
    border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
    background: #000000;
    -webkit-border-radius:10px;
    border-radius: 10px;
    }

    Dengan menggunakan kode tersebut akan menghasilkan scrollbar seperti terlihat pada kanan layar atau pada  kotak scroll kode pada post diatas.

    Untuk menyesuaikan warna scroll dengan warna dasar blog, kalian bisa merubah pada bagian background dengan merubah kode warnanya, ukuran pada kode width dan bentuk pada kode border-radius.

    Sayangnya css scrollbar ini belum didukung oleh browser Mozila hanya baru support untuk browser Chrome miliknya google. Sudah saya coba menggunakan -moz- tapi memang mozila belum mendukung css scrollbar ini, padahal pengguna mozila terutama diindonesia masih banyak. Jika kalian membuka Situseo Blog pada browser selain chrome tentu saja tampilan scrollbar-nya akan seperti biasa. Tidak ada salahnya jika kalian menggunakan css scrollbar ini digunakan pada blog kalian untuk mempercantik tampilannya, walupun hanya bisa terlihat berbeda pada browser chrome saja.

    Oleh : Situseo