Cara Membuat Custom WebKit Scrollbar di Blogger - Tempat Blogging

Cara Membuat Custom WebKit Scrollbar di Blogger

Apakah Anda ingin meningkatkan Scroll bar di situs Anda? Scroll bar akan muncul di sisi kanan layar dan, memungkinkan pengguna untuk Scroll ke bawah halaman setiap kali mereka menyeret ada mouse ke atas atau bawah halaman. Untuk memberikan pengalaman user-friendly bagi pengunjung Anda, yang penting adalah memiliki Gulir bar halus. Namun, tidak ada keraguan bahwa Kustom Gulir bar melakukan pekerjaan cukup mahal, tetapi tidak sempurna. Beberapa hari yang lalu, pembaca kami memberitahu kami tentang warna-warni WebKit Scrollbars bahwa ia telah melihat pada website yang berbeda. Selain itu, ia juga meminta kami untuk mengembangkan yang serupa. Oleh karena itu, dalam artikel ini kita akan belajar Cara Membuat Custom WebKit Scrollbar di Blogger?

Apa Definisi WebKit Scrollbar?

Sebagian besar orang masih berpikir apakah kata "WebKit Scrollbar" berarti, itu adalah bar vertikal atau horizontal yang biasanya muncul di sisi kanan layar dan yang memungkinkan pengguna untuk gulir ke bawah halaman melalui mouse mereka. Jika ada yang masih tidak dapat memahami bagaimana cara kerjanya kemudian, jangan lupa untuk memeriksa demonstrasi berikut yang akan menghapus semua kesalahpahaman yang bergoyang-goyang ke dalam otak Anda. Perhatikan screenshot berikut.
::-webkit-scrollbar                 { /* 1 */ }
::-webkit-scrollbar-button          { /* 2 */ }
::-webkit-scrollbar-track           { /* 3 */ }
::-webkit-scrollbar-track-piece     { /* 4 */ }
::-webkit-scrollbar-thumb           { /* 5 */ }
::-webkit-scrollbar-corner          { /* 6 */ }
::-webkit-resizer                   { /* 7 */ }


Mengapa Menggunakan Custom Scrollbar?


Tidak ada alasan mengapa mematikan seseorang bisa mengatakan tidak kepada Disesuaikan Scrollbar karena menambah hidup elegan baru ke situs web nya. Pertimbangkan bahwa seseorang memiliki website yang sangat profesional tapi karena itu, Scrollbar adalah dari tua-sekolah, sehingga cukup jelas bahwa, itu akan menghancurkan prospek lengkap dari sebuah situs web. Untuk mempelajari lebih lanjut tentang perbedaan antara biasa atau dan scrollbar disesuaikan mempertimbangkan screenshot berikut.

Bagaimana Tambahkan WebKit Scrollbar di Platform Blogger?


Sejujurnya, tidak ada kompleksitas dalam tutorial ini karena semua yang perlu kita lakukan adalah untuk memasukkan CSS untuk tema kita, dan itu akan melakukan pekerjaan cukup mudah. Untuk menginstal WebKit Scrollbar dalam template blogger Anda mempertimbangkan petunjuk berikut.
  • Kembali ke Blogger.com >> Template >> EDIT HTML >> Lanjutkan.
  • Sekarang dalam tema Mencari ]]> </ b: skin> dan di atasnya Paste Code CSS Berikut.
/* --- Tempat Blogging Custom WebKit Scrollbar di Blogger --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}
  • Kemudian Ganti # 336699 dengan warna dengan selera Anda.
Semua Selesai: Setelah melakukan semua kustomisasi cukup tekan tombol Save. Sekarang Kunjungi situs Anda dan kami yakin itu tidak akan mengecewakan Anda. Dengan menggunakan teknik yang sama, kita dapat menyesuaikan berbagai elemen dari sebuah situs web. Semoga Bermanfaat
Show comments
Hide comments

3 Responses to "Cara Membuat Custom WebKit Scrollbar di Blogger"

  1. Mantap gan tutorialnya.
    No Afgan No Rossa, kasih Cendol buat ownernya. . :-d

    ReplyDelete
  2. Makasih banyak gan, bisa dicek di blog ane ilmumum[dot]blogspot.com

    ReplyDelete

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close