Monday, 9 December 2013

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 comments

jadi kalau di firefox nggak ngefek ya mas ?

pakai mozila kang http://prntscr.com/29shlc

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 :)

makasih kang Rian,, atas bantuannya :)

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

Nggak bisa praktekin nih gan bab saya masih pake hp

gak masalah jenk indah,, pakai HP juga udah sempat mampir disini ^_^

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

iya neng Dwi,, seperti yg sudah di jelaskan sama kang Rian ^_^

sebenernya bagus mas.. sayangnya prefix webkit ngga valid css

begitu yah mas, apa ada solusi lain?

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

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

Thanks infonya sob, ntar bisa ane coba.

Akan memberatkan loading blog engga nih mas?

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

bisa kok sist Muya,, cuma tampil pada pengguna Chrome

sama-sama,, salam kang Walidin :D

tidak kang, tergantung koneksi internet juga =D

Keren sekali .. :) visit back

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

sama2 kang aswar,, jangan lupa bosan kesini =D

Sering main ke mari lama2 bisa ketularan pinter deh ;)

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

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

sama-sama kang Eka,, di tunggu kreasinya :)

Mantap tenan .. sekali lagi lanjutkan !!

Knapa kok hanya pada Google Chrome ajah kang? :/

iya mas jeniv :D kalau untuk chrome mungkin belum support :D

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

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

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


EmoticonEmoticon