Cara Pasang Flat Sroll Kafe Di Blog

Cara Pasang Flat Sroll Kafe Di Blog

- Berikut ini tutorial Cara Pasang Flat Sroll Bar di Blog dengan mudah. Dengan memasang Flat Sroll Bar pada blog, akan menambah desain tampilan blog menjadi lebih manis dan menciptakan pengunjung blog menjadi tertarik dengan tampilan blog Anda.

Berikut ini Cara memasang/membuat Flat Sroll Bar di Blog :

Login ke blogger.com

Masuk ke edit template, kemudian cari aba-aba </b:skin>

Copy aba-aba css dibawah ini, taruh diatas aba-aba </b:skin>

Style 1: Dengan Radius (Rounded Scroll Bar)

CSS/*Scroll Bar Style 1*/
::-webkit-scrollbar{height:12px; border-radius:20px; width:15px; background: #2c3e50;}
::-webkit-scrollbar-thumb{border-radius:20px; background: #3cc091;}

Kode #2c3e50 itu yaitu aba-aba warna background scroll bar-nya, dan #3cc091 yaitu warna scroll barnya. Anda sanggup merubah sesuai aba-aba warna yang diinginkan.

Style 2 Dengan Background Bar-nya Grid

copy aba-aba css dibawah ini dan taruh di atas aba-aba </b:skin>.

CSS/*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, untuk background grid yang gelap. Sedangkan , untuk #374760 background grid terang. Anda sanggup merubah sesuai warna yang diinginkan. Sedangkan aba-aba border-radius:20px, itu yaitu aba-aba yang menciptakan barnya menjadi bulat/tumpul. Anda sanggup merubah nilainya atau juga sanggup menghapusnya.

Sekian artikel Cara Pasang Flat Sroll Bar di Blog, biar bermamfaat sobat. Ditunggu komentar dari Anda.