Cara Mengubah Tampilan Scrollbar Jadi Keren

Pada postingan kali ini, akan menyebarkan tutorial bagaimana cara mengubah tampilan scrollbar pada blog. Seperti kita tahu, scrollbar yakni alat penggeser yang dipakai untuk melihat bab bawah suatu blog atau website. Scrollbar ini akan muncul jikalau blog/website Anda melebihi kapasitas layar monitor sobat.

Secara standart tampilan scrollbar menyerupai gambar diatas, namun dengan menambahkan CSS pada template, kita dapat mendapat tampilan yang berbeda, namun CSS ini setahu saya hanya bekerja pada browser Google Chrome. Apabila teman semua memakai browser Mozilla Firefox, maka tidak dapat melihat perubahan saat teman menambah CSS scrollbar pada template sobat.

Nah, berikut ini yakni panduan singkat bagaimana cara mengubah tampilan scrollbar untuk blog sobat:

1. Login ke akun blog Anda

2. Pilih hidangan Template => Edit HTML
3. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)

4. Copy dan pastekan instruksi di bawah ini sempurna di atas instruksi tadi !!

scrollbar {width: 13px; background: #CCCCCC; border-radius: 10px}

scrollbar-thumb {background-color: #252525; border-radius: 10px}

Keterangan:

Ganti goresan pena berwarna biru dengan ukuran scroll yang Anda inginkan.

Ganti goresan pena berwarna merah dengan warna background scrollbar kesukaan Anda.

Ganti goresan pena berwarna orange dengan warna scroll yang Anda inginkan.
Untuk menentukan warna lain, silahkan lihat disini : Daftar instruksi warna HTML

5. Selesai, lihat blog Anda !!

Nah, bagaimana Sobat gampang kan??? Demikianlah tutorial blog yang dapat Saya bagikan. Jika ada pertanyaan atau apapun itu, Silahkan anda berkomentar di kotak komentar di bawah. biar 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 alasannya yakni menciptakan halaman posting kita menjadi awut-awutan dan memperbesar ruang. Nah makanya dengan artikel ini saya akan menawarkan tutorialnya untuk menghilangkannya.

Sumber http://tugasku-4u.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: