Cara Mengganti Tampilan Scroll Bar pada Blogger

scroll

Cara Mengganti Tampilan Scroll Bar pada Blogger - Tampilan Scroll default dalam artian belum di edit akan terlihat tidak menarik itupun tergantung browser pada sistem operasi yang sedang digunakan. sebelumnya apa itu scroll bar ? scroll bar adalah suatu baris yang berisi kotak berfungsi untuk menggulung layar baik itu ke kanan-kiri ataupun atas-bawah.

Lihat pada scroll di samping kanan blog ini atau lihat pada gambar d atas. Sedikit modifikasi dengan CSS tampilan scroll akan terlihat menarik dan kreatif.

Untuk tuorial silahkan ikuti langkah di bawah ini :
1. Masuk Blogger
2. Klik Template dan edit HTML
3. cari kode ]]></b:skin>  untuk proses pencarian tekan CTRL+F
4. letakkan kode CSS diatas kode ]]></b:skin>
::-webkit-scrollbar {height:12px;width: 12px;background: #FFF;}
::-webkit-scrollbar-thumb {background-color: #FF0;-moz-border-radius: 10px;border-radius: 10px;}
6. Simpan Template

Efek ini hanya berfungsi pada browser yang berbasis webKit seperti Google Chrome dan QtWeb


Silahkan Modifikasi dengan kreatifitas Anda. Semoga bermanfaat dan Selamat Mencoba.

37 Responses to Cara Mengganti Tampilan Scroll Bar pada Blogger

  1. jadi kalau di firefox nggak ngefek ya mas ?

    ReplyDelete
    Replies
    1. pakai mozila kang http://prntscr.com/29shlc

      Delete
    2. iya gan , karena ini css scrollbar hanya bisa support pada browser webkit saja seperti chrome , safari, dsb..

      meskipun css di atas -webkit- diganti menjadi -moz- pun akan tetap sama , status "not support with all browser" .. :)

      semoga bermanfaat gan :)

      Delete
    3. makasih kang Rian,, atas bantuannya :)

      Delete
  2. Ane nggak bisa praktekin nih gan bab saya pake hp......*telan nafas*

    ReplyDelete
    Replies
    1. gak masalah jenk indah,, pakai HP juga udah sempat mampir disini ^_^

      Delete
  3. Nggak bisa praktekin nih gan bab saya masih pake hp

    ReplyDelete
  4. punya ku udh ganti scroolnya, tapi berlaku di chrome doang, klo buka lewat mozilla ga ngefek ;(

    ReplyDelete
    Replies
    1. iya neng Dwi,, seperti yg sudah di jelaskan sama kang Rian ^_^

      Delete
  5. sebenernya bagus mas.. sayangnya prefix webkit ngga valid css

    ReplyDelete
  6. scroll bar yang cantik, ini sangat menarik. ini kunjungan balik dari saya salam kenal..

    ReplyDelete
  7. Oohh kalau blogku berarti nggak bisa di edit seperti ini..
    Karena aku nggak pakai google chorm n Qtweb..
    Tapi memang bagus siihh tampilanya

    ReplyDelete
    Replies
    1. bisa kok sist Muya,, cuma tampil pada pengguna Chrome

      Delete
  8. Thanks infonya sob, ntar bisa ane coba.

    ReplyDelete
  9. Akan memberatkan loading blog engga nih mas?

    ReplyDelete
    Replies
    1. tidak kang, tergantung koneksi internet juga =D

      Delete
  10. ternyaata scroll bar bisa di ubah-ubah juga ya mas. Baru tahu saya hmmmm :)

    ReplyDelete
  11. ane bookmark dulu gan, nanti di praktekin, makasih sharenya...

    ReplyDelete
    Replies
    1. sama2 kang aswar,, jangan lupa bosan kesini =D

      Delete
  12. Sering main ke mari lama2 bisa ketularan pinter deh ;)

    ReplyDelete
    Replies
    1. Amin.. saya juga ikutan pinter ya mas,hihi ^_^

      Delete
  13. contohnya seperti blog ini yah mas keren juga yah tampilan scroll barnya, jadi pengen nyoba, makasih mas buat tutorialnya :)

    ReplyDelete
    Replies
    1. sama-sama kang Eka,, di tunggu kreasinya :)

      Delete
  14. Mantap tenan .. sekali lagi lanjutkan !!

    ReplyDelete
  15. Knapa kok hanya pada Google Chrome ajah kang? :/

    ReplyDelete
    Replies
    1. iya mas jeniv :D kalau untuk chrome mungkin belum support :D

      Delete
  16. gan ane mau tanya cara untuk buat scrol bar di bawah gimana ya gan?

    ReplyDelete
  17. merubah warna nya kyak apa mas admin?
    Tolong di jwab ya... =D

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔