Beautiful CSS3 Scrollbar for Blogger

Scrollbar berfungsi untuk mengscroll halaman. Scrollbar tampak beda pada setiap sistem operasi. Jika anda menggunakan sistem operasi Windows XP, maka scrollbar akan tampak berwarna biru muda. Mungkin style scrollbar bawaan OS komputer anda sangat membosankan.

Nah, kali ini saya akan memberi tutorial "beautiful CSS3 Scrollbar for Blogger". Jadi buanglah rasa jenuh anda sekarang! Blog anda akan terlihat lebih stylist jika dipasang CSS3 custom scrollbar. Oke, tak usah berlama-lama lagi, mari kita lihat tutorialnya!

View Demo

Compatibility

Scrollbar ini hanya bekerja pada browser yang mendukung Webkit seperti salahsatunya browser Google Chrome. Anda dapat mendownload browser Google Chrome disini :

Download Google Chrome

Menambahkan Kode CSS

1. Login ke akun Blogger anda.

2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> . Lalu taruh kode dibawah ini tepat diatas kode tersebut.

/* Custom Scrollbar - Tutorial by Bloggingforstyling
-----------------------------------------------------*/
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}

::-webkit-scrollbar {
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
 background-color: #0ae;
 background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
             color-stop(.5, transparent), to(transparent));
}

4. Klik Save Template

More Style

Terakhir, saya ingin berterima kasih kepada Tim Holman yang telah membuat kode dari CSS3 scrollbar ini. Ia telah membuat 14 vertical scrollbar yang salahsatu dari keempat belas tersebut adalah scrollbar ini. Untuk melihat 13+ scrollbar lainnya anda bisa klik disini. Terima Kasih.

Read More