Secara standart tampilan scrollbar seperti gambar diatas, namun dengan menambahkan CSS pada template, kita bisa mendapatkan tampilan yang berbeda, namun CSS ini setahu saya hanya bekerja pada browser Google Chrome. Apabila sobat semua menggunakan browser Mozilla Firefox, maka tidak bisa melihat perubahan ketika sobat menambah CSS scrollbar pada template sobat.
Nah, berikut ini adalah panduan singkat bagaimana cara mengubah tampilan scrollbar untuk blog sobat:
1. Login ke akun blog Anda
2. Pilih menu Template => Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)
4. Copy dan pastekan kode di bawah ini tepat di atas kode tadi !!
scrollbar {width: 13px; background: #CCCCCC; border-radius: 10px}
scrollbar-thumb {background-color: #252525; border-radius: 10px}
Keterangan:
Ganti tulisan berwarna biru dengan ukuran scroll yang Anda inginkan.
Ganti tulisan berwarna merah dengan warna background scrollbar kesukaan Anda.
Ganti tulisan berwarna orange dengan warna scroll yang Anda inginkan.
Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML
Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML
5. Selesai, lihat blog Anda !!
Nah, bagaimana Sobat mudah kan??? Demikianlah tutorial blog yang bisa Saya bagikan. Jika ada pertanyaan atau apapun itu, Silahkan anda berkomentar di kotak komentar di bawah. semoga bermanfaat...
Baca juga Cara Menghilangkan Langgan Entri Atom dan Subscribe Komentar pada blog. Mungkin sebagian dari Sobat ada yang risih dengan adanya Langgan Entri Atom dan Subscribe Komentar karena membuat halaman posting kita menjadi berantakan dan memperbesar ruang. Nah makanya dengan artikel ini saya akan memberikan tutorialnya untuk menghilangkannya.
Baca juga Cara Menghilangkan Langgan Entri Atom dan Subscribe Komentar pada blog. Mungkin sebagian dari Sobat ada yang risih dengan adanya Langgan Entri Atom dan Subscribe Komentar karena membuat halaman posting kita menjadi berantakan dan memperbesar ruang. Nah makanya dengan artikel ini saya akan memberikan tutorialnya untuk menghilangkannya.
Tolong bantu saya klik Tombol Vote ini...
| 12:50 AM |
32
komentar
32 komentar
terima kasih sudah berbagi boss, kapan-kapan akan saya coba. selamat berkreatifitas. salam.
Balasterimakasih infonya..
Balastemplatenya khusus atau yg default juga bisa dibikin kayak gitu?
BalasSemuanya gan bisa... coba ajha dulu..!!!
Balassipp. dicoba
BalasSama-sama gan... rajin-rajin berkunjung yah...!!! Hehehee.. :D
Balaskalo mrubah dari hp gmn gan,
BalasWahh... kurang tahu juga mas kalau lewat HP.
BalasMaaf yahh... :)
thnx gan nice artikel langsung praktekin hehe
Balasmakasih ya atas tutorialnya :)
BalasNggak ngerti -_-
BalasSama-sama gan...
BalasNggak ngertinya dimana ??
Balasthanks gan :D
Balasmakasih ye bro atas infonye ...
Balasterima kasih gan sudah berbagi info yang sangat menarik dan bermanfaat
Balasmaksudnya di atasnya gimana gan ? tolong dibikin contohnya dong
BalasMaksudnya kode point nomor 3 di atas yang di beri tulisan warna merah...
BalasOke maksih panduannya bos
Balasmakasih sob informasi seputar blogging nya, bermanfaat bnget buat ane yg masih newbie :D mampir yaa
Balasahmad-adzkiya.blogspot.com
Thank you infonya
Balasmampir ya bos ..
www.kampungjasa.com
aku coba deh kya nya keren nih
Balashttp://top-wisata.blogspot.com/2013/09/daftar-tempat-wisata-di-lombok-menarik.html
hadir master , terimakasih ilmunya
Balasgak ngerti.........di coba ubah gak bisa malah.
BalasAnda pakai browser apa gan ?? kalau pakai mozilla, hasilnya memang tidak akan kelihatan, coba pakai browser google chrome...
Balasmaaf gan, saya pemula, itu yang dicari kode script apa ya gan ?
Balascoba buka bloggernya terus tambah widget masbro terus tambahkan kode ini
Balas[code]<style type="text/stylesheet">
::-webkit-scrollbar {width: 13px; background: #CCCCCC; -moz-border-radius: 10px; border-radius: 10px;}
::-webkit-scrollbar-thumb {background-color: #252525; -moz-border-radius: 10px; border-radius: 10px;}
</style>[/code]
siapa tahu bisa, hanya kasih saran aja :-) buat agan yang posting makasih
Gan, kok gak tampil di blog saya? mohon bantuannya dong
BalasSudah tampil kok... memang kalau agan pakai browser firefox, tampilannya tidak akan kelihatan... harus pakai browser crhome...
Balasmakasih ya :)
BalasIya, sama-sama...
Balaseror kodenya :v !!
BalasKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.