Cara Mengubah Warna Scrollbar Di Blog Dengan Css 3



Scrollbar ialah sebuah garis di sebelah kanan jendela browser atau aplikasi lainnya yang berfungsi untuk menggeser tampilan ke bawah dan keatas, atau ada juga Scrollbar yang berfungsi untuk menggeser tampilan kesamping kiri dan kanan.

Taukah anda, bahwa kini kita dapat mengubah warna Scrollbar tersebut dengan akomodasi yang ada pada CSS3 Webkit?. Sekarang tentunya semua blogger ingin menciptakan tampilan yang paling bagus dan keren pada Blog nya untuk menciptakan blognya lebih Menarik dan Elegan.

Pada Tutorial kali ini, Mas Galih akan menyebarkan mengenai bagaimana cara mengubah warna scroll kafe di Blog. Untuk membuat tampilan Blog keren , menarik dan elegan. Kali ini kita akan memakai Fasilitas yang ada pada CSS 3. Penasaran bagaimana cara mengubahnya? ayo, pribadi saja.

Mengubah Warna Scrollbar di Blog dengan CSS 3

  1. Login ke Blogger >> Template >> Edit HTML
  2. Tekan "CTRL + F" untuk melaksanakan Find. Dan cari Kode ini "]]></b:skin>" ( Tanpa tanda petik )
  3.  Copy aba-aba Ini :

        ::-webkit-scrollbar {
        width: 8px; height:8px;
        }
        ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
        background:#fff;
        }
        ::-webkit-scrollbar-thumb {
        background: rgba(186,35,35,0.8);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        }
        ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(186,35,35,0.4);
  4. Paste aba-aba tersebut di atas aba-aba "]]></b:skin>" yang sudah kita cari pada langkah ke 2 tadi.
  5. Simpan Template. Selesai.
Scrollbar ini hanya akan aktif pada Browser "Google Chrome". Jika kau ingin aktif juga di Firefox, maka kau harus menginstall Add-On firefox, tetapi itu hanya akan aktif di browser yang sudah terpasang Add-On menyerupai browser kamu. Selamat Mencoba! Kalau mengalami masalah, silahkan berkomentar.

Subscribe to receive free email updates:

0 Response to "Cara Mengubah Warna Scrollbar Di Blog Dengan Css 3"

Post a Comment