13++ Gaya Srollbar Unik dan Keren untuk Blogger

13++ Gaya Srollbar Unik dan Keren untuk Blogger

13++ Gaya Srollbar Unik dan Keren untuk Blogger - Pada artikel sebelumnya, Saya pernah membahas tentang cara membuat scrollbar sendri di blogger menggunakan CSS.

Nah, pada kesempatan ini, Saya akan membagikan kepada kalian beberapa macam gaya/style scrollbar yang cocok untuk blog Blogger kalian. Style scrollbar ini, telah dirancang serenposive mungkin dan cocok sekali untuk segala template blog kalian.

13++ Gaya Srollbar Unik dan Keren untuk Blogger


Gaya scrollbar 1 : Hitam

13++ Gaya Srollbar Unik dan Keren untuk Blogger
Kode HTML
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #ecf400;
background: #BA8B02;
background: -webkit-linear-gradient(to right, #181818, #BA8B02);
background: linear-gradient(to right, #181818, #BA8B02);
}
::-webkit-scrollbar-thumb:hover {
background: #333;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}

Gaya scrollbar 2 : Merah

13++ Gaya Srollbar Unik dan Keren untuk Blogger

Kode HTML
::-webkit-scrollbar {
width: 11px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: #1a2a6c;
background: -webkit-linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
background: linear-gradient(to right, #fdbb2d, #b21f1f, #1a2a6c);
}
::-webkit-scrollbar-thumb:hover {
background: #b21f1f;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 3 : Stripe

13++ Gaya Srollbar Unik dan Keren untuk Blogger
Kode HTML
::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #6D6027;  background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,
transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:active {
background: #0B3B0B;
}
::-webkit-scrollbar-track {
background-color: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 4 : Biru Tua

13++ Gaya Srollbar Unik dan Keren untuk Blogger
Kode HTML
::-webkit-scrollbar{
width: 11px;
}
::-webkit-scrollbar-track{
background: #c4c6c8;
}
::-webkit-scrollbar-thumb{
background: #105B74;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.4);
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{ 
background: #08A67C;
}

Gaya scrollbar 5

13++ Gaya Srollbar Unik dan Keren untuk Blogger
Kode HTML
::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 8px #00B141;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:hover {
background: green;
}
::-webkit-scrollbar-thumb:active {
background: #000;
}

Gaya scrollbar 6 : Google

13++ Gaya Srollbar Unik dan Keren untuk Blogger
Kode HTML
::-webkit-scrollbar {
background: transparent;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #C2C2C2;
box-shadow: inset 0 0 5px #AEAEAE;
}
::-webkit-scrollbar-thumb:hover {
background-color: #8A8A8A;
}
::-webkit-scrollbar-thumb:active {
background-color: #727272;
box-shadow: inset 0 0 5px #595959;
}
::-webkit-scrollbar-track:hover {
background-color: #E6E6E6;
border: 1px solid #CFCFCF;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 7 : Codepen

Gaya scrollbar 7 : Codepen
Kode HTML
::-webkit-scrollbar {
background: transparent;
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #555;
box-shadow: inset 0 0 2px #333;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 8 : Biru-G

Gaya scrollbar 8 : Biru-G
Kode HTML
::-webkit-scrollbar {
width: 10px;
height: auto;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #09123c), color-stop(1.00, #0e3e8d));
background: -webkit-linear-gradient(#09123c, #0e3e8d);
background: -moz-linear-gradient(#09123c, #0e3e8d);
background: -o-linear-gradient(#09123c, #0e3e8d);
background: -ms-linear-gradient(#09123c, #0e3e8d);
background: linear-gradient(#09123c, #0e3e8d);
}
::-webkit-scrollbar-thumb:hover {
background: #0000a0;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 9 : Biru Langit-G

Gaya scrollbar 9 : Biru Langit-G
Kode HTML
::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #b6e2fd), color-stop(0.20, #91bae4), color-stop(0.50, #8fbff0), color-stop(0.51, #6ba8e4), color-stop(0.75, #87c2fb), color-stop(1.00, #bcf4fd));
background: -webkit-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -moz-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -o-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: -ms-linear-gradient(top, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
background: linear-gradient(to bottom, #b6e2fd 0%, #91bae4 20%, #8fbff0 50%, #6ba8e4 51%, #87c2fb 75%, #bcf4fd 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #2E9AFE;
}
::-webkit-scrollbar-thumb:active {
background: #555;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 10 : Green Shadow

Gaya scrollbar 10 : Green Shadow
Kode HTML

::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #52d352), color-stop(0.73, #4a944b), color-stop(0.53, #2e7c2f), color-stop(0.28, #2c7a2d), color-stop(0.00, #7cff7f));
background: -webkit-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -moz-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -o-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: -ms-linear-gradient(top, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
background: linear-gradient(to bottom, #7cff7f 0%, #2c7a2d 28%, #2e7c2f 53%, #4a944b 73%, #52d352 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #008542;
}
::-webkit-scrollbar-thumb:active {
background: #004522;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 11 : Orange-G

Gaya scrollbar 11 : Orange-G
Kode HTML
::-webkit-scrollbar {
width: 11px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
border-radius: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ff8a16), color-stop(0.79, #ffae5e), color-stop(0.51, #ff8916), color-stop(0.41, #ff9d3d), color-stop(0.00, #ffb268));
background: -webkit-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -moz-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -o-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: -ms-linear-gradient(top, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
background: linear-gradient(to bottom, #ffb268 0%, #ff9d3d 41%, #ff8916 51%, #ffae5e 79%, #ff8a16 100%);
}
::-webkit-scrollbar-thumb:hover {
background: #FF9615;
}
::-webkit-scrollbar-thumb:active {
background: #904F00;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 12 : Multi-Red Thin

Gaya scrollbar 12 : Multi-Red Thin
Kode HTML
::-webkit-scrollbar {
width: 8px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c21b00), color-stop(0.77, #f60), color-stop(0.63, #e86a55), color-stop(0.33, #f49c8d), color-stop(0.20, #ea2804));
background: -webkit-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -moz-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -o-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: -ms-linear-gradient(top, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
background: linear-gradient(to bottom, #ea2804 20%, #f49c8d 33%, #e86a55 63%, #f60 77%, #c21b00 100%);
}
::-webkit-scrollbar-thumb:hover {
background: red;
}
::-webkit-scrollbar-thumb:active {
background: darkred;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 13 : Smooth Magenta

Gaya scrollbar 13 : Smooth Magenta
Kode HTML
::-webkit-scrollbar {
width: 12px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #f600fe), color-stop(1.00, #fd63ff));
background: -webkit-linear-gradient(#f600fe, #fd63ff);
background: -moz-linear-gradient(#f600fe, #fd63ff);
background: -o-linear-gradient(#f600fe, #fd63ff);
background: -ms-linear-gradient(#f600fe, #fd63ff);
background: linear-gradient(#f600fe, #fd63ff);
}
::-webkit-scrollbar-thumb:hover {
background: #C60088;
}
::-webkit-scrollbar-thumb:active {
background: #6D024B;
}
::-webkit-scrollbar-track {
background: #F6E4F0;
}
::-webkit-scrollbar-track:active {
background: #FCC9EC;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Gaya scrollbar 14 : Silver Shine

Gaya scrollbar 14 : Silver Shine
Kode HTML
::-webkit-scrollbar {
width: 9px;
height: auto;
}
::-webkit-scrollbar-thumb {
background: #0080ff;
border: 0px none #ffffff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #bdbbbb), color-stop(1.00, #777));
background: -webkit-linear-gradient(#bdbbbb, #777);
background: -moz-linear-gradient(#bdbbbb, #777);
background: -o-linear-gradient(#bdbbbb, #777);
background: -ms-linear-gradient(#bdbbbb, #777);
background: linear-gradient(#bdbbbb, #777);
}
::-webkit-scrollbar-thumb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #4b4b4b), color-stop(1.00, #131313));
background: -webkit-linear-gradient(#4b4b4b, #131313);
background: -moz-linear-gradient(#4b4b4b, #131313);
background: -o-linear-gradient(#4b4b4b, #131313);
background: -ms-linear-gradient(#4b4b4b, #131313);
background: linear-gradient(#4b4b4b, #131313);
}
::-webkit-scrollbar-thumb:active {
background: #111;
}
::-webkit-scrollbar-track {
background: #e2e2e2;
}
::-webkit-scrollbar-corner {
background: transparent;
}

Cara Memasang Kode HTML Gaya Scrollbar diatas di Blogger

  • Pertama, login ke akun Blogger kalian. Lalu, buka opsi Tema => klik Edit HTML
  • Kemudian, pastekan salah satu kode HTML diatas sebelum kode </b:skin> atau ]]></b:skin>
  • Simpan perubahan dan cek hasilnya.

Akhir Kata …..

Saya harap, dari ke-14 gaya scrollbar diatas, ada yang cocok dengan blog kalian. Oh ya, kalian juga bisa meng-editnya kembali dengan warna-warna atau gaya kalian sendiri.

Oke, sekian saja pembasan tentang 13++ gaya scrollbar yang unik dan keren untuk blogger dari Saya. Semoga bermanfaat untuk kalian dan terimakasih telah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel