Cara Mengganti Tampilan Scroll Bar jadi Keren di Blog – Sobat blogger tentu tahu apa itu scroll bar bukan? Yup, scroll bar arau bar penggulung adalah suatu baris yang berisikan kotak, yang digunakan untuk menggulung layar, baik ke kiri kanan ataupun ke bawah atas. Oh iya. Ngomong – ngomong soal scrollbar, tentu Anda sudah membaca postingan terdahulu saya bukan, yang membahas cara memasang scroll bar pada kotak komentar? Jika belum, monggo boleh dibaca nanti. Secara default, scroll bar akan memiliki warna yang berbeda, tergantung sistem operasi dan browser user yang mengakses blog. Contohnya, lihat tampilan blog Tips SEO + Blog – PC 123 yang diakses dengan browser QtWeb berikut ini :
Nah, dengan sedikit kreatifitas dan kustomisasi CSS blog,
kita dapat menganti warna dan tampilan scroll bar dalam blog menjadi lebih
menarik dan unik. Contohnya seperti gambar dibawah ini.
Tertarik mengganti scroll bar blog Anda menjadi lebih
menarik? Silahkan ikuti langkah – langkah dibawah ini :
1. Buka
akun Blogger Anda, lalu masuk ke Template.
2. Buat
sebuah backup dari template blog Anda, lalu klik Edit HTML.
3. Tekan
CTRL+F, lalu cari kode ]]></b:skin>
4. Pastekan
kode berikut diatas kode ]]></b:skin>
::-webkit-scrollbar {height:12px;width: 12px;background: #00CC00;} ::-webkit-scrollbar-thumb {background-color: #FF9900;-moz-border-radius: 10px;border-radius: 10px;}
Catatan :
Kode yang berwarna hijau menentukan warna latar (rel) scrollbar,
sedangkan kode yang berwarna oranye menentukan warna bar pada scrollbar. Gantilah
sesuai dengan keinginan. Jika Anda tak hapal dengan kode HTML warna, klik disini.
5. Terakhir,
klik Simpan.
Bagaimana?
Jika efek tidak terlihat, coba ganti browser yang Anda gunakan. Efek ini hanya
berfungsi pada browser dengan basis WebKit, seperti pada browser QtWeb ataupun Google Chrome. Selamat mencoba!
Jika Anda merasa artikel ini bermanfaat, tolong share, berikan Google + dan
like Fanpage blog ini.
Terima kasih, dan salam blogger!
Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!
Wahh nice share bro,bermanfaat banget buat saya
BalasHapusthanks
kgk work gan
BalasHapusWah terimakasih banyak......mohon kunjungannya ya : http://enggakpunya.blogspot.com
BalasHapusterima kasih atas tutorialnya
BalasHapuswww.giribig.com
www.idcheat.com
www.duniagame.info
terima kasih tas infonya
BalasHapusbrilian6.blogspot.com
mantap dah artikelnya kawan
BalasHapusitu membuat loading blog jadi lama gk gan?
BalasHapus