How to Start a Blog? Panduan Membuat Website Hanya 30 Menit

Trik CSS Merubah desain Scrollbar Webkit Browser

Di antara kalian yang sering browsing dan mengunjungi website-website seperti TheNextWeb pasti akan melihat scrollbar yang berbeda dan terlihat keren seperti gambar dibawah ini.

thenextweb desain scrollbar webkit tutorialGimana, terlihat unik dan bagus kan? di postingan kali ini saya akan memberikan tutorial merubah CSS Desain Scrollbar pada webkit browser seperti Chrome dan Safari, sehingga jika website anda di akses dengan menggunakan browser itu akan berubah scrollnya menjadi lebih bagus. dan mungkin bagi penggila web desain sangat membutuhkan webnya jika diakses memperlihatkan Scrollbar yang berbeda. caranya cukup mudah, copy script css dibawah ini dan paste di style css template yang anda gunakan, semisal wordpress ya copy aja ke style.css di folder theme yang sedang digunakan.

::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
    background: #000;
}

Saya mencoba mempraktekan di website sederhana saya centerklik.com dengan memasang css tersebut diatas, dan hasilnya seperti screnshot dibawah ini. 

centerklik scrollbar desain css webkit

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Facebook+.

10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Niagahoster

Rp.26.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

IDCloudhost

Rp.30.000/Bln Free Domain, Unlimited Space & Bandwidth Get Host

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Add a Comment

Your email address will not be published. Required fields are marked *