Cara Buat Flat Scroll Bar



Cara Buat Flat Scroll Bar - Untuk anda yang ingin membuat blog-nya lebih terlihat cantik lagi mungkin anda sudah mendesain blog anda dari header sampai dengan footer kali ini saya ingin memberikan sedikit tutorial yang sangat mudah untuk mengganti scroll bar atau garis penggulung dimana scroll bar ini sangat berguna jika blog kita mempunyai banyak entri dan ingin ada dalam satu page para pengunjung dapat dengan mudah menggesernya kebawah oleh karna itu adanya scroll bar ini sangat membantu para blogger yang ingin menampilkan banyak entri di homepage mereka, scroll bar yang menarik pula bisa jadi untuk menarik minat pembaca untuk berkunjung ke halaman website atau blog anda. Cara menambahkannya pun sangat mudah tidak sesulit yang dikira karna ini hanya menggunakan CSS jadi hanya satu langkah saja tutorialnya.

Baca Juga: Cara Membuat Tombol Night Mode Di Blog

Untuk kali ini mungkin ada beberapa orang yang bosan melihat scroll bar di blog-nya warna abu-abu saja atau warna default dan ingin memberikan warna yang menarik, disini ada beberapa cara yang bisa kamu terapkan di template blog kamu.

Letakkan kode dibawah ini tepat diatas kode </b:skin> dan simpan template, lalu lihat scroll bar blog atau website anda sudah berganti.

Style 1 Dengan Radius (Rounded Scroll Bar)
/*Scroll Bar Style 1*/
::-webkit-scrollbar{height:12px; border-radius:20px; width:15px; background: #2c3e50;}
::-webkit-scrollbar-thumb{border-radius:20px; background: #3cc091;}
Untuk kode #2c3e50 itu adalah kode warna background scroll bar-nya dan #3cc091 adalah warna scroll barnya.

Style 2 Dengan Background Bar-nya Grid
/*Scroll Bar Style 2*/
::-webkit-scrollbar{height:12px; border-radius:20px; width:15px; background: #eaeaea;
background: repeating-linear-gradient(-45deg,#374760 0,#374760 25%,#2c3e50 0,#2c3e50 50%) 0/6px 6px;font-family:'Roboto',sans-serif;font-size:15px;font-weight:400;text-align:left;color:#000;margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar-thumb{border-radius:20px; background: #3cc091;}
Kode warna #2c3e50 adalah kode untuk garis background grid yang gelap dan #374760 adalah yang terang.
Untuk yang gak mau ujung bar-nya bulat atau tumpul kamu bisa cari kode border-radius:20px; di kode CSS yang saya berikan diatas dan hapus kode itu lalu save ditemplate anda.

Bagaimana? mudah bukan, sebenarnya sudah banyak yang memberikan tutorial seperti ini tapi untuk penerapannya masih ada juga yang bingung oleh karna itu saya membuat ini dengan sangat sederhana dan mudah.

Cukup sekian tutorial sederhana yang saya bisa berikan semoga bermanfaat dan jangan lupa tinggalkan jejak anda dikolom komentar supaya saya bisa tau kalo tutorial ini berguna. Dan jangan lupa follow blog ini supaya update terus setiap harinya.

0 Response to "Cara Buat Flat Scroll Bar"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel