Cara Mengubah Tampilan Scrollbar di Blogger

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Custom Scrollbar" seperti yang kita ketahui bahwa pada blog atau web bisa kita ubah..

Rian
By Rian
0
Cara Mengubah Tampilan Scrollbar di Blogger

Cara Mengubah Tampilan Scrollbar di Blogger

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Custom Scrollbar" seperti yang kita ketahui bahwa pada blog atau web bisa kita ubah..

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Custom Scrollbar" seperti yang kita ketahui bahwa pada blog atau web bisa kita ubah penampilan nya seperti yang kita mau tentu saja harus mempuyai skill dasarnya terlebih dahulu dan pada kali ini saya akan membagikan sebuah Tutorial sederhana namun bisa dikembangkan oleh kalian nantinya menjadi lebih bagus dan keren lagi...

Cara Mengubah Tampilan Scrollbar di Blogger

Ohh ia sebelum ke Tutorial saya sampai lupa, Blog ini adalah yang kedua di buat oleh saya tentu nya untuk Tema nya saya pakai punya Mas Sugeng saja karena untuk punya sendiri lagi dibuatkan belum jadi heeh...

Kenapa disini saya membuat Topik tentang "Custom Scrollbar" ? dikarenakan mungkin jarang ada yang buat dan lagi ga ada yang kembangkan ke tampilan manapun nah pada kali ini saya yang akan buat supaya menjadi lebih menarik tentu nya jauh lebih bagus tampilan nya ketimbang pakai "Default" pada Browser nya.

Bagaimana tampilanya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Custom Scrollbar" tersebut dibawah :#

See the Pen
Custom ScrollBar
by Rian_kuno (@rian_kuno)
on CodePen.


Bagaimana tampilanya ? meskipun simple sih tapi nanti saya lanjutkan ke yang lebih bagus lagi :\

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Mengubah Tampilan Scrollbar di Blogger


1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <b:skin> or <style>
::-webkit-scrollbar {
  height: 16px;
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(transparent, #ff0000);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(transparent, #00c6ff);
}
4. Simpan Tema
5. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" yah meskipun sederhana tapi bagus apalagi pas banget kalau "Tema" nya Darkmode loh.

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#
Rian

Kota: Bandung, Pasirkoja - Kabupaten bandung.

Post a Comment